Ian Tearle thinks he will call it a day!

Plurked 5 hours, 23 minutes ago

Javascript Goodness

Facelist

My latest jQuery project, a bit of a baby really, I have been looking around for this functionality for a while now, finally found a version which is not entirely finsihed or fully functional.

If you use Facebook, you will see what I am trying to achieve here. When sending a mail in Facebook when you start typing into the recipient field you get a quicksearch list, click on a name and it inserts it into the input field similar to how Apple Mail displays its results, continue to enter names and you create a list of people each indiviually able to delete.

Well I have achieved this effect in jQuery, but need to develop it further to provide functional functionality.

So I played around with the code and managed to get some of it working, but I need help. I need the ability to have an ID of an item inserted into a hidden array, but the script will not pass in the second element of the array in a PHP script, rather it does, but then fails when you try to delete the item, it adds a comma into the ID tag and does not handle all spaces properly, thus fails.

There are a dozen support requests around, but if you want to help me out here, all comments gratefully recieved. You may download the zip file and have a go for yourself, but please do let me know if you get anywhere. Zip files here.

A project page has been created on the jQuery website at the following page Facelist.

Demo available at Facelist

Creative Commons License
Facelist by Ian Tearle, Theo Chakkapark, Xavier Domenech, Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, Jörn Zaefferer is licensed under a Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.
Based on a work at www.iantearle.com.

by Ian Tearle 11:02am , Tuesday, July 8, 2008

Comments

9

Ian Tearle
Ian Tearle says:

Have updated the files to reflect some changes I made last night, you can now delete the items when hitting delete on the keyboard and clicking the X on the icons. Line 216 - Remove_tag_data(data[1]) did the trick. Also passed the second part of the array as an ID into the hidden input field. The PHP array needs to be in the format "item Name"=>idno;

Posted On: Wednesday, July 9, 2008 @ 8:46am

Anders Heivoll
Anders Heivoll says:

Hi. Great script. Seems to work great, and is just what I need. But one major problem: it doesn't work with jQuery 1.2.6! Gives various bugs related to the selecting of, and searching of, values. Do you know what causes this, and if it is easy to fix?

Best regards
Anders Heivoll

Posted On: Thursday, August 21, 2008 @ 10:15pm

Ian Tearle
Ian Tearle says:

@Anders Heivoll, sorry to hear that you have been having trouble with the script, I uploaded 1.2.6 to the Facelist page, but unfortunately do not see the errors you mention? Have you a link you can share?

Posted On: Thursday, August 28, 2008 @ 11:57am

Anders Heivoll
Anders Heivoll says:

The problem is not current in IE, but in Opera (9.52) and Firefox 3 on my Windows Vista. This also applies for the demo page here, now that you've updated to 1.2.6. It works extremely slow, and when trying to add more than one value it is buggy (all auto-suggestions disappears when typing more than one letter, plus plus).
Currently I don't have a link to share. Can upload if necessary, but settings are basically the same as on your server.
Thanks for response :)

Posted On: Thursday, September 4, 2008 @ 4:18pm

Anders Heivoll
Anders Heivoll says:

Sorry, I meant more than two letters in my last post. Also, it has a small visual error in IE 7 (missing rounded corner on right side of item box).

Posted On: Thursday, September 4, 2008 @ 4:20pm

ray-x
ray-x says:

Hi,

Thanks for your great work. It's a really cool and useful plugin for jquery.

However I am having a small problem with it.

May I know whether there is any way to preset some items in the list? I tried to print out the item directly:

<li id="bit-1234567" class="token">
<span>
<span>
<span>
<span>Mike</span>
</span>
</span>
</span>
<span class="x"> .x</span>
</li>

But it doesn't work. The result_field doesn't include the preset items. Nor does the close button (x) work.

Thanks!

Posted On: Thursday, September 4, 2008 @ 6:20pm

ray-x
ray-x says:

Hi,

I have solved the problem by pass in the preset items (in an array of "text|id" pairs) in the autocomplete properties so that I can call MakeBox() to create the preset items after

var $input = $(input).attr("autocomplete", "off") ;
$input.before('')

Thanks again for your great work! :)

Posted On: Thursday, September 4, 2008 @ 7:53pm

Theo Chakkapark
Theo Chakkapark says:

Hi Ian, It doesn't seem to be working in many cases. Try your demo, and try typing in "Heron". In the response, three items are returned, but none display for selection: Black-crowned Night Heron|5 Purple Heron|6 Grey Heron|Ardea cinerea Squacco Heron|Ardeola ralloides Green Heron|Butorides virescens I get the same issue with trying to implement it on my own site with my own data. If you could let me know why this happens, that would be great. Thanks.

Posted On: Wednesday, November 12, 2008 @ 2:55am

Ian Tearle
Ian Tearle says:

@Theo Thank you very much for your comments, and your email pertaining the fixes you have made to Facelist. Theo Chakkapark has made changes to Facelist which resolve the duplicate results, matches every available search query and removes the ID number from the display. The updated script has been uploaded to JQuery and to the Facelist demo page. Thank you again for your work on this Theo, you have saved me a job to do, and I apologise that I have neglected this project, due to others taking my time up.

Posted On: Wednesday, November 12, 2008 @ 9:55am

Post A Comment

* Required Fields
No HTML is allowed. All links, and new lines will be automagically converted to HTML for you.
Notice to spammers, all links will be sanitized with rel="nofollow".

*
*
*
*