Author: Glenn J. Schowrak
The search filter works ok but I really needed a way to allow the users to type in a standard text input box and display a pick list below the box as they type. Nothing I found off the shelf really worked well with jQuery Mobile so I created a simple ajax solution of my own.
This text box currently only works with ajax. I don't see any real value in a static list. If I needed a simple small list I would just use a dropdown. The vast majority of my autocomplete needs fill from database queries.
Granted, this is not perfect but it suits my needs. I hope others fine it useful too. I am sure I will make changes to it over time.
Built upon jQuery 1.9 and jQuery Mobile 1.3. Most likely this will work with newer versions as well.
The basic concept is minimal coding on the web form side and a query page to feed data do the dropdown list via ajax.
To see how the example works, view the source in the frame above or in a stand alone page. You won't be able to see how we gather teh data but you will see how simple it is to turn a text input into an autocomplete text input.
The only requirements to make the tag work are...
There are many optional properties you can set to configure the look and performance of the control. The default values will be displayed with each property along with a description of the value you can use.
The data returned from your data source must be a JSON object that would consist of the query that was originally passed in plus the suggestion associative array. Because the suggestions are in an associative array, you can use number or string values.
You can download the sourse and minified versions of this control here: jquery-mobile-autocomplete.zip
PHP is pretty simple. Create an array with a sub-array and then dump the JSON. Here is a code snippet:$reply=array();
ColdFusion has an issue creating JSON from a STRUCT because it puts all the field names in upper case. You may need to generate the JSON by hand. Here is a code snippet:<cfset suggestion_list="">