Rafael Dohms

Author’s note: This article was first published in my AJAX Column (AjaxOnline.com.br) in Portuguese where my intended audience is a group of beginners learning about the AJAX initiative. Since it turned out to be a really interesting article I decided to translate it and share it with a wider audience.

I wondered where I should begin explaining AJAX and finally decided I should begin explaining what’s behind it and how it came around, so everyone knows where we are coming from.

Ajax, web 2.0, RSS, if you’ve never heard any of these terms than something is wrong, you are either way behind in web technologies or not serious enough about web development. The concept of Web 2.0 is what we may call the “father” of the latest trends in web applications, where various technologies are used to improve the user’s experience, but what is the concept? Continue Reading »

Recently I published an updated version of my auto-complete (Google suggest) script compatible with IE and FireFox and based on PHP/AJAX.

After publishing version 1.0, I had some feedback from people who downloaded an tested it, so now I decided to correct some of the bugs that were found, and make a few improvements also. So now I’m going to publish version 1.1, check out some of the changes I made. Continue Reading »

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.