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
September 26th, 2009 at 7:54 pm
Hello!
Thanks a lot!
But there is a big problem, the autocompleter lags a lot. I mean, there is often no response… Have you an Idea whats the problem?
greets from Austria!
September 26th, 2009 at 8:00 pm
Huhu! :)
Ich bins nochmal auf Deutsch:
Also der Autocompleter funktioniert leider nur von Zeit zu Zeit, es gibt meistens gar kein Response von xajax. Setzte ich debug auf true erhalte ich eben nur alle 2-3 mal ein Fenster mit Informationen.. Selbiges Problem gibts auch bei deiner Online-Demo! Weiters solltest du im input-Tag autocomplete=”false” setzten.
Hast du eine Idee an was das liegen könnte?
Ansonsten trozdem, Super geile Arbeit!!
January 8th, 2010 at 8:56 am
I agree with leichti with the problem of the autocompleter lags.What do you suggest for its not responding.
February 8th, 2010 at 1:38 pm
Hey, thanks very much for this awesome code! I found the ‘performance’ issue the others were talking about, a race condition in the javascript.
In the function rc_autocompleter just before it calls the timeout, you have it doing ‘rc_autocompleter_delay_stamp = rc_microtime();’
This should (and is in your example) be done in the delayed function, so commenting out this line solves the issue.
I also modified your example quite a bit to work more generically for my API at the expense of a few bytes more network traffic per request. The changes I made are documented mostly here http://dcode.isa-geek.org/tblog/10 , maybe it will be useful for someone?
July 14th, 2011 at 6:27 am
Hi, im IE funktioniert das recht gut, im Mozialla leider gar nicht – hat jemand eine Idee?
September 29th, 2011 at 9:32 am
I agree with leichti with the problem of the autocompleter lags.What do you suggest for its not responding.