It is often helpful to use an autocompleter on your website. Perhaps in search dialogs? An example is google on an extra search page.

I tested some free tools, but I had always the problem that there was no possibility to use two or more autocompleter on one page and to organize the dependency. E.g. insert a name of a country in the first textbox and in the second textbox insert a name of a city. On the city textbox you only want to see cities belonging to the inserted country – no other cities.

This problem was the reason why I developed my own autocompleter using xajax. This framework allows me to respond on the key events and select the values from the database. I could write my own functions and use any parameters.

I generated a textbox with a hidden div below which is calling a function on the onkeyup event by using xajax. In this test I mark the searched string with a span and on CSS I colored it blue. Additional I added a mouseover using CSS.

Here you could download the second version of my autocompleter.

Changes:
– Using the arrow keys to choose the correct value
– Performance Tuning

Demo
download: Autocompleter v2 (119.55KB)
added: 08/11/2009
clicks: 2553

It is often helpful to use an autocompleter on your website. Perhaps in search dialogs? An example is google on an extra search page.

I tested some free tools, but I had always the problem that there was no possibility to use two or more autocompleter on one page and to organize the dependency. E.g. insert a name of a country in the first textbox and in the second textbox insert a name of a city. On the city textbox you only want to see cities belonging to the inserted country – no other cities.

This problem was the reason why I developed my own autocompleter using xajax. This framework allows me to respond on the key events and select the values from the database. I could write my own functions and use any parameters.

I generated a textbox with a hidden div below which is calling a function on the onkeyup event by using xajax. In this test I mark the searched string with a span and on CSS I colored it blue. Additional I added a mouseover using CSS.

Demo *** NEW VERSION ***

download: Autocompleter v2 (119.55KB)
added: 08/11/2009
clicks: 2553

That’s all!