jquery plugin: Facebook style autocomplete multi select box

Posted: September 15, 2012 in Javascript/CSS
Tags: , , , , , ,

Below are two awesome plugins I have tried out in my new project.

Chosen: http://harvesthq.github.com/chosen/, good in design, but bad in performance

Chosen is an html select box enhancement and it must initialize on a select box. This approach could be a serious performance drawback when you try to load a long list. Nowadays, JSON are commonly used as the data format for writing data to client side. Using Chosen means that we must first build all the select options from the JSON data and then pass the select element to Chosen and it will loop all the options again to build Chosen UI.

I tried to load 5K records, the plugin becomes noticeable slow even in Firefox.

To use Chosen: $(“#the_Select_Element”).chosen({search_contains:true});

AutoSuggest: http://code.drewwilson.com/entry/autosuggest-jquery-plugin, my choice

AutoSuggest is built on a normal text box and you don’t need build a select box first. I tried the same 5K data, the performance is much better than Chosen.

To use AutoSuggest:

var data = {items: [{value: “21”, name: “Mick Jagger”},{value: “43”, name: “Johnny Storm”},{value: “46”, name: “Richard Hatch”}]};
$(“input[type=text]”).autoSuggest(data.items, {selectedItemProp: “name”, searchObjProps:”name”});

Update: AutoSuggest has a bug that when you remove the selected item from the text box, the first item is still in the hidden value. It was discussed in http://drew.tenderapp.com/discussions/autosuggest/16-bug-removing-elements. You can apply the patch there.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s