Facebook Style Suggest List

A few projects that I'm working on where using select lists that were being populated with hundreds of options and they were just becoming overwhelming. To rectify the situation, I developed this clone of Facebook's "Compose To" functionality.

Try typing the name of a character from NBC's "The Office" or ABC's "Alias" in the field below. If you have javascript enabled, you should see some options. Click an option to select it.



Version 1.0 - This is the initial release. I expect to make a few more changes in the next few days as well as adding keyboard navigation, search highlighting, and request caching. Download version 1.0 now.


To use SearchList, you'll also need prototype, scriptaculous 1.7.1 beta 3, and my own prototype extensions. When I get around to it, I'll test it with the latest version of prototype and scriptaculous and update the links accordingly.

To use SearchList, simply include all the dependencies mentioned above plus the facebook theme files. Add a div with a class of "searchlist_container" and an id field Then, do something like: Event.observe(window, 'load', win_load); function win_load() { SearchListFactory.createList({ area: id_property_of_div, url: url_to_ajax_script }); } That's the bare minimum. That will send a request via get to your script where the "q" parameter is the query typed into the search field.

Currently the SearchList expects the response from the ajax script to be formatted in JSON and it should look something like: { search_results: [ { value: "jbristow@cia.gov", text: "Jack Bristow", subtext: "jbristow@cia.gov", hidden: "" } , { value: "sbristo@cia.gov", text: "Sydney Bristow", subtext: "sbristo@cia.gov", hidden: "" } ] } That's it. Please report any bugs or send any fixes to: