Developing an auto-complete script with AJAX/PHP

Working on on Management system for the Comercial department I received innumerous requests saying “but can’t you show me the client’s name as I type here?”. Well I wish the words were as poetica as those but what really happened is that they were mixing up the registered clients with IE auto-complete feature, well you know, users will be users.

So I was faced with a challenge, how could I solve the problem working is a web-based environment? I needed a script that would search the database in real time as I typed the actual words in the text box, and return to me the vendor related to that client. Well some time back thinking in web-based systems I would just claim “impossible! Dude, we are talking browser here, no some VB or deplhi program!”… not anymore! Hence xmlHttpRequest came into question and the new AJAX-way of working net content came into view.

So I begun my search for an “auto-complete” or “Google suggest” (yeah, when you are good I can create cool names uh?) script that would handle my needs. I found quite a bit each with a diferent solution but no AJAX integrated (except Google’s of course). I tried to get a clue from Google implementation, but trust me, when someone wants to make a javascript file look scrambled and illegible, well it is possible, and Google accomplished just that.

So I begun from the beginning as they say:

The idea was simple, with each keystrike an AJAX request is sent to a PHP script that is responsible for searching the database looking for the entries that begin with the string provided and returning a XML formatted list of results. Something like:

That was simple enough, just trigger a floating DIV and fill it with an unordered list (UL) and feed each result as a lit item (LI). So the basic was there, but you needed to grab the mouse and click on the choosen result when you found it, not that much fun…

It was missing something like Google used, that triggered the navigation through the results using the keyboard, up and down arrows to be exact. And also using the ENTER and TAB keys to select the result. So I based myself on another script I had checked out just to get a heading on which way to go. So adding A plus B I finally finished the script, complete with AJAX, database search, keyboard and mouse navigation… the works. When it was done I found innumerous other applications for it, it seemed this kind of script can be applied in several situations, and make them much more user-friendly. So I decided to make the script more generic to make its distribution easier so I could shared it with all of you.

Live Demo: here Download (with examples): dmsAutoComplete.zip

Hope it turns out to be of some use to any of you.

Known Bugs: In Firefox on the first list population run the UL appears as a single line, not breaking lines between choices.

comments powered by Disqus

Related Posts

WP Widget: BlogBlogs.com.br Favorites

WP Widget: BlogBlogs.com.br Favorites

  • September 2, 2006

After BlogBlogs released its public API, it became possible to develop plug-ins that used their data to display different information on our blogs. Using this widget its possible to retrieve you favorite blogs list, and keep it synchronized always.

Read More
Programação, códigos e Paris Hilton

Programação, códigos e Paris Hilton

  • September 24, 2006

Passeando pelo Digg.com encontrei alguma pérolas sobre programação que vou compartilhar com vocês.

Read More
dmsAutoComplete v1.2

dmsAutoComplete v1.2

  • February 27, 2007

Estou liberando hoje o novo release do meu script que é capaz de gerar sugestões no preenchimento de campos de texto.

Após as melhorias da versão 1.1 esta nova versão, a 1.2, traz poucas melhorias, mas permite ampliar o universo de aplicações onde este script pode ser utilizado, além de corrigir alguns erros enviados pelos usuários.

Read More