jQuery Autocomplete example

jQuery Autocomplete is used when the select target is too many to select from the combobox. In this example, it uses Ajax in order to get selection candidates.

Access and work the example

In order to access this example, please access the url below or "jQuery Autocomplete" link from the toppage.

http://localhost:8080/samples/autocomplete/

Then the page below will appear.

jQuery Autocomplete example page

Then input a character or string into the textbox, the autocomplete part appears.

jQuery autocomplete part

top of this page

Implementation

This example shows you how to implement the Autocomplete widget using ajax.

The source code is in the "ALINOUS_HOME/samples/autocomplete/" folder.

Source code folder of jQuery autocomplete example

top of this page

Included jQuery files

This example uses css and JavaScript files of jQuery, listed below.

In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.

top of this page

Autocomplete form and Html

The autocomplete form is in the "index.html". The Html code is below.

After the html is loaded, JavaScript below executed.

This script calls $.ajax() at first, and the call back function binded to the "success" event calls the autocomplete() jQuery plugin function and set candidates data.

top of this page

Ajax script

The url "/samples/autocomplete/candidates.alns" returns JSon string of the candidates.

This program access the london table and convert the result of SELECT SQL's result into JSon string, by using Record.dom2json().

top of this page

Install script

This example uses database table, so you have to setup it, if you manually do. The install script is at "/install/autocomplete.alns".

install script of autocomplete example

This script create london table and setup data.

The source of data is "/install/london.xml" file in the same folder. By calling File.readAllText() function, it reads the xml file and put into string variable, and parse it by Html.html2Dom() function. Html.html2Dom can also handle the xml formatted files.

Testing automation

This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Autocomplete example.



Go to Top