JQuery: Auto Complete Plugin

Have found the JQuery is really handy to duel with complex javascript tasks. In this article, I am going to introduce the auto-complete plugin.

 

First of all, like many other JQuery plugins, you need to have the JQuery library (you may also need JSelect library as well) available, which you can download from.

http://docs.jquery.com/Downloading_jQuery

 

Second, you need to include the auto complete library and its style sheet, which you can download from the link that have been referenced at the end of this article

 

Basic use of Auto-Complete

 

The logic behind the auto-complete plugin is quite straight forward. The prompt for auto-complete is derived either from a string array or an url.  The url is normally pointed to a dynamic web page generator, such as servlet. The out put of the page should be a string array (separated by line breaks) as well. If you want to have a pair value as each items of the array, you need to separated the pair value by “|”. For example

 

Qingdao|2549

Qinglan|8179

 

Let’s see an example how to use this auto-complete plugin.

 

$(document).ready(function(){

    $(‘#periodTypeSelect’).jSelect();

    $("#BY_NAME").autocomplete(‘<c:url value="/ajax/places.htm"/>’, {

        onItemSelect:function(li) {

             findValue(li,"#PLACE");  // start recursive call

        },

        minChars: 3,

        selectOnly:true

    });

});

 

$("#BY_NAME") specifies the input elements id. <c:url value="/ajax/places.htm"/> indicates where to fetch the resource data.

 

onItemSelect is function that will be called when an item is selected. The autocompleter will specify a single argument, being the LI element selected. This LI element will have an attribute "extra" that contains an array of all cells that the backend specified.

 

findValue() will examine the value currently in the input element and look it’s value up to see if it can find a matching value. This function can potentially perform an AJAX operation, therefore the findValue() function does not return a value. Instead, you need to specific a onFindValue callback function that will run. This method is valuable if you need to set the Autocomplete input element to a value via JavaScript and the "value" of the text field is mapped to extended properties stored in the LI element’s "extra" property.

 

If selectOnly is set to true, and there is only one autocomplete when the user hits tab/return, it will be selected even if it has not been handpicked by keyboard or mouse action. This overrides selectFirst.

 

minChars specifies the number of chars that required to trigger the autocomplete function.

 

You might wonder how your input passed to server side. This process is actually hidden in the box. When you type anything into the input “BY_NAME” element it will forward a request to your specified url as the value of the parameter “q”.  

 

Using with MultiActionController

Since the auto-complete plugin will append the “?q=” suffix after its request string, you can’t specify  addition parameters directly after the url. Instead, you need to set the additional parameters with extraParams method.

 

$(document).ready(function(){

    $(‘#periodTypeSelect’).jSelect();

    $("#BY_NAME").autocomplete(‘<c:url value="/ajax/places.htm"/>’, {

        minChars: 3,

        selectOnly:true

    });

    $("#BY_AUTHORITY").autocomplete(‘<c:url value="/ajax/places.htm"/>’, {

        extraParams: { display:"byAuthority" },

        minChars: 3

    });

});

 

extraParams: { display:"byAuthority" } the method will append the &display=byAuthority after /ajax/places.htm?q=youInput, which will enable you to use an extended class from MultiActionController to handle all your auto-complete requests.

 

For details of how to use this plugin you can find from its documentation at

http://www.pengoworks.com/workshop/jquery/autocomplete_docs.txt

 

Reference: http://www.pengoworks.com/workshop/jquery/autocomplete.htm

 

Advertisements
This entry was posted in Javascript. Bookmark the permalink.

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