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

Code Reviews - Not just a quality tool

Code Reviews - Not just a quality tool

  • May 17, 2016

I’m a big fan of Code Reviews, or Peer Reviews, within the work flow of a team. But many times when talking about them people refer to them mostly as a tool to avoid bugs, improve quality or the overlooking of details. While these things do surely come out of having a review process, I do not believe they are the real reason why they are a good thing for teams.

Read More
Using User-Defined Varibles in MySQL

Using User-Defined Varibles in MySQL

  • September 28, 2006

Cast the first stone he who never made a mistake modeling a database! Every now and then in your career you will be face to face with a problem like this: due to the nature of a table’s data you created a table without a primary key, or using a composed key. So far so good, but due to an upgrade you see the need to have a unique key identifying all the registers in your table, in my case it was due to a AJAX interface.

So what now? You have a table full of data, and of course, as Murphy’s law will tell you, that data cannot be erased. MySQL will prevent you from turning a filled to a primary key if it finds duplicated values in the table. Quite a brain twister, but I did a little research and found a rather simple solution to the matter.

UPDATE: So it actually came to my atention that a query I had already tried does the job in an even simpler form, but my modelling tool executed the commands out of sync and that why i had problems. So this article stays on as a good example of how to use mysql variables.

Read More
Projeto "Eu desenvolvo seu plugin para Wordpress!"

Projeto "Eu desenvolvo seu plugin para Wordpress!"

  • March 11, 2009

Atualização! Este projeto não está mais ativo. O serviço de desenvolvimento de plugins não é mais oferecido.

Read More