A very nice tool to display drop down data on your website

September 18th, 2012 by admin Leave a reply »

I had a requirement on a project I have been working on to provide a search tool that can look up live data and filter it based on what you type through an auto-complete function.  I have been through 3 iterations, here is what I have used to this point:

The first one I used was the JQuery ComboGrid found HERE.  This tool was a good first run, it provides auto-complete and will display a grid that attaches to your INPUT element and allows you to display columns of data and will populate the field with whatever you select.  The problems I had with it is that it doesn’t look at all on an IPad and formatting it was somewhat of a nightmare, so I had to ditch this one.

Then I came across the Chosen control found HERE.  This control was a better step in that it does a very good job of formatting a SELECT element with auto-complete and filtering of the results.  The problems I ran into with this control was that it does some weird things on the IPad and it had no native function to hook into live data on a server, so I had to continue my search.

I have finally landed on the Select2 control, found HERE, so far this control does everything I need, it provides an ajax: function that allows you to hook right into your web call and even provides hooks for formatting the results and CSS file inclusion.   A word of advice if you are using the ajax: function, make sure you are using an INPUT element instead of SELECT and that your results include a lowercase id and text property, the control uses the id for searching, and the text property to display the results.  Happy coding!!


Leave a Reply