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!!
