jQuery Mobile - Autocomplete Text Input
Author: Glenn J. Schowrak
Name: jquery-mobile-autocomplete.js
Version: 0.1.0
Size: 4.6k
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 simple small list would just use dropdown or datalist.
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...
- Must use an input tag
- Must use type="text"
- Must use data-role="autocomplete"
- Must use data-url property to hold the URL to your data source ({val} sould be part of your URL where you want the user entered text to be placed)
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.
- data-role="autocomplete"
REQUIRED AS-IS - data-url=""
REQUIRED. You need to provide the URL to the data source. All the logic and list filtering needs to happen in your data source code and a JSON string must be returned (see below for an example). You can use the place holder {val} at any location in your URL. If omitted query={val} will be appended to your URL. - data-speed="250"
Number of milliseconds for the show/hide activity. - data-delay="500"
Number of milliseconds to wait between the last keystroke and the ajax call. - data-theme=""
Any theme (such as "a", "b", "c", etc.) to apply to the dropdown listview. The jQuery Mobile default is used if this is bank. - data-highlight="ui-btn-up-b"
Any class you want to use to highlight the suggestion text where it matches what the user has typed in. You can use one of the jQuery Mobile pre-defined classes or one from your own CSS. - data-cache="true"
Set to false if you want to prevent the web browser from caching data. It is normally best to leave this at the default for performance reasons. - data-timeout="0"
The number of milliseconds to wait for the ajax data to return from the data provider. When set to zero the call will not ever timeout. - data-minlen="2"
The minimum number of characters the user must type before the first ajax call is made. - data-loading=""
The message to display to the user when the first ajax call is made. All HTML is valid. - data-no-match=""
The message to display to the user if no data match is found. All HTML is valid. - data-formatter=""
If you don't like the default format of the select text, you can specify your own function to do the formatting. You only provide the name of the function here. For example data-formatter="myformatter". Your function needs to take in two parameters query and value (ie: function myformatter(query,value) { ... } ) and your function must return the string to display in the dropdown list. - data-click=""
You can specify a function to call after the user clicks one of the rows in the suggestion dropdown list. You only provide the name of the function here. For example data-click="myclick". Your function will only get the key value for the row not the text of the row. Your data source must provide the key value. (ie: function myclick(key) { ... } ).
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.
{"query":"fo",
"suggestion":
{
"51":"Food",
"28":"Pet Food"
}
}
You can download the sourse and minified versions of this control here: jquery-mobile-autocomplete.zip
Creating your JSON depends on your web server language.
PHP is pretty simple. Create an array with a sub-array and then dump the JSON. Here is a code snippet:
$reply=array();$reply["query"]=$_REQUEST["query"];
$reply["suggestion"]=array();
while ($row = mysqli_fetch_assoc($your_query_results))
{
$reply["suggestion"][$row[$key_field]]=$row[$value_field];
}
echo json_encode($reply);
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:
{ "query":"#what_user_searched_for#" , "suggestion": { #suggestion_list# }}