Ian Tearle
  • Portfolio
  •  
  • About
  •  
  • Blog
  •  
  • Contact

Projects

Facelist

Facelist is getting a new Facelift. Facelist 2.0 is coming soon. Follow @iantearle for details of how you can get it.

 

Media By Ian Tearle presents the jQuery Facelist project. Built for the sole purpose of providing a Facebook style autosearch, Ian is letting you build upon this excellent product.

If you like this, please support development and Digg this project! A link for ease, or see above.

Whilst there are some errors still to be ironed out, this is the latest build of Facelist the Jquery Autosearch (Facebook style).

Currently as far as I am aware there is only an error with the delete key not working when there is more than two items in the list. Everything else has been ironed out and fixed by myself and Theo Chakkapark (linkedin.com/in/theochakkapark).

Update: 2/9/09 There is now a new CSS file for IE, and new CSS for Facelist utilising CSS3 techniques, also making the token effects quicker to load without using images.

27 Jan
9:35
∞
  • Uncompressed
    75kb

Follow @iantearle for updates to Facelist and more

Please Digg.

Please Donate

14 Comments

  • mark

    mark

    wow

    02 Apr
    7:32
    ∞
  • Ian Tearle

    Ian Tearle

    Facelist now focus' back to the input box on pressing the return key. Also I have added a blur() action on ESC keypress.
    Someone has asked me if its possible to blur() Facelist on clicking outside of the input, for this you would have to build an overlay and use an onclick event to hide both the overlay and Facelist, I will not be building this into Facelist.

    09 Apr
    10:27
    ∞
  • brian

    brian

    Ok. I find myself changing something about each version. On line 339 of version 1.1, I changed from split("|",2) to just split("|";), which allows me to pass more variables along to customize the token with a title attribute.

    09 Apr
    1:11
    ∞
  • brian

    brian

    One other thing. I had to add a z-index to #result_list, which seems to be the only layout thing I've changed about it and now I can't click the item to select it. When it click the li item, basically what happens is the lose focus action causing the list to go away. Any ideas on how to fix this?

    09 Apr
    1:18
    ∞
  • abby

    abby

    how to prefill the input with 2 or more values?

    11 Apr
    4:03
    ∞
  • Ian Tearle

    Ian Tearle

    @abby in order to prefill the input you will need to add the markup for and option to the ul.facelist; the markup takes this form:

    <li id="bit-(id)" class="token"><span><span><span><span>(name)</span></span></span></span><span class="x"> .x</span></li>

    You can then add as many items as you wish.

    11 Apr
    9:27
    ∞
  • abby

    abby

    Thanks Ian!
    I have try this solution and seems works, but I'm not able to delete the prefill tags by clicking the x now!

    I also found a little bug in code. If you search in code for variable csub you will found a return csub and after a return null that is unreacheable.

    11 Apr
    4:07
    ∞
  • FrankE

    FrankE

    Hi Ian, I second Abby's issue where items I pre-populate the box with can't be deleted, nor do they prevent items with the same id's being returned in the search results. This is quite important to me, as I've elected to use this script as a way of editing tags on a client's site, but as it stands there's no way to delete existing tags, only add to the list. Do you think there might be a way to allow deletion in a future update?

    Thanks for an awesome plugin by the way!

    08 May
    3:29
    ∞
  • alex rades

    alex rades

    Hi and thank you for this wonderful piece of software!
    I have two suggestions for you:

    1) provide a way to close the dropdown when you click outside of it
    2) provide a way to read json from the server instead of plain text, so you don't have to worry about escaping

    Do you think these suggestions are worth implementing?

    Thank you!!

    16 May
    1:02
    ∞
  • Kamil

    Kamil

    Hi. Is there any way to use it as normal autocomplete with only one result selectable, displaying normally inside the input box?

    07 Jun
    10:59
    ∞
  • Jonathon

    Jonathon

    First, are you still actively developing for this plugin?

    I would like to add the feature of being able to pre-populate with a more semantic markup that could be read and translated into the "standard markup"

    08 Jun
    10:04
    ∞
  • Ian Tearle

    Ian Tearle

    @FrankE: I did note this error, and will look into a better way of pre-populating the field.
    @alex rades: Escape should work in jQuery less than 1.2, however something was changed in later versions, I will look into a fix for this. Also I shall consider looking at jSON, but time restraints are against me.
    @Kamil: There are many autocompletes that will do what you are looking for, Facelist is an advancement and I dont think you should be looking to make Facelist less than what it is, just search for jQuery autocomplete and use one of those.
    @Jonathon: Facelist is something I will get round to developing further as and when time allows me to work on it, fortunately I have other projects that require my attention and earn me some money. Note how I do not serve adverts from my website, and probably never will, as I hate them. This means though that I have to give my paid projects more time than this open source one. If you would like to donate via PayPal, please visit http://cmsurl.com/U

    09 Jun
    8:19
    ∞
  • Jimmyj

    Jimmyj

    Congrats on the awesome plugin ;)

    I was just wondering if there was any sort of hack to delete the pre-populated options until you manage to get around to implementing it properly ?
    (also on a side note - in an attempt to get the plugin to submit the id's of the pre populated options, i also pre populated the to_users input element. However the script creates a second element with the same id which over rides the post value on form submission)

    Finally, is there currently a way to mimic autocomplete's mustMatch directive in facelist ?

    Many Thanks

    20 Jul
    1:02
    ∞
  • Viper

    Viper

    Good plugin. But I can't take data from input when send to server.
    After select element from list, hidden filed "to_users" must contain selected data, but not.
    I try:
    $("#search";).click(function(){
    var data = $("#to_users";).val();
    $("#to_user";).attr("value", data);
    });
    in script, but in firebug I've take form with value:

    this is after select one element from list.
    Where do I wrong ?

    03 Aug
    10:23
    ∞
 

No HTML is allowed. All links and new lines will be automagically converted to HTML for you.

Comment form

  • Reinvigorate Site Statistics  
  • Media Temple Hosting  
  • Hire Me Need a Web Designer?  
  • Made on a Mac MacBook Pro 15"  

In partnership with (mt) Media Temple

Great Designers I know.

  • Rita Cruz
  • Garrett Murray
  • Ryan Miglavs

Copyright © 2010 Ian Tearle. All Rights Reserved. Powered By Expanse

Icons used and inspired from the icon expert at Komodo Media