Updated April 10th with a couple of features per comment suggestions
Ok, I’ve added a couple of features and settings based on the comments I’ve got. The additional settings are:
- If a click on the
documentshould hide the results list.
- If the focus should be set to the
inputelement, once an item has updated the
inputelement’s value (by initially having the
- If the results list should be hidden when the
inputelement’s value is updated.
Another additional feature is that if you use the arrow keys to navigate the results list, arrow up from the first item as well as arrow down from the last, will set the focus back to the
Updated April 11th
Changed the license to a Creative Commons Deed.
Updated April 13th
I got an e-mail with the suggestion to turn off the web browser autocompletion feature of the
input element. I think it was a good idea, so I have now added it as a setting:
turnAutoCompleteOff : true
The thing is, though, that my small hobby scripts soon turn into something I think will be useful for other people, so I feel a strong urge to share it. Branded by having web developing as a living, after the initial rush and the proof of concept phase, more “sexy” matters come into my mind: scalability, performance, cross browser and cross platform support etc…
Anyway, once I’ve spent way too much time on that (and since I want to be a good father and husband, we’re talking late nights; basically, anytime when I seem to be the only person in the entire world awake), sooner or later I reach I time when I’m ready to share. Luckily, for my sanity, that time is now.
I was kind of hoping that a project would turn up where this was asked for, but it never came (at least not yet), so I had to give in and create the script in my free time. The good thing with that, however, is that I own the script and can bring it to any project I seem fit. I just hate leaving my “script babies” behind. 🙂
The script and the concept
The result of my efforts is AJAX Suggestions!
The general idea is that, as soon as you type a couple of characters into an
input element. The user can then click on, or navigate through the results with the keyboard, and choose the item they prefer.
I’ve also added some functionality to use this to do a look-up of the value in the
input element, and when one of the results are chosen, it replaces the value in the
The script looks for elements that have the CSS class
ajax-suggestion and then another CSS class, like
url-the-actual-URL, where you should replace the-actual-URL with your desired URL for the AJAX call. The HTML code can look something like this:
<input type="text" class="ajax-suggestion url-ajax-demo.php">
Important to note is that AJAX Suggestions supports multiple elements in the same web page, who can also use different URLs for their AJAX calls. The same element is used for presenting the results, so it will only show you the results/suggestions for the latest search.
A library, in two versions
I’ve created two versions of this script. One that is completely stand-alone, and will automatically work as soon as it’s included into a web page (given that the element/-s contain the desired CSS classes, of course.)
The other one is written based on DOMAssistant, which means that is slightly smaller (and leaner, according to my taste).
License and copyright
/* AJAX Suggestions is developed by Robert Nyman, http://www.robertnyman.com, and it is released according to the Creative Commons Deed license (http://creativecommons.org/licenses/GPL/2.0/) For more information, please see http://www.robertnyman.com/ajax-suggestions */
Where to go from here
Note: remember to call the
init() method of the
ajaxSuggestions object, with the approach you find suitable, when using the DOMAssistant version.
A thanks to PPK
In the darkest hour of developing this, I was eating candy till I felt sick and drinking about one glass of water a minute out of pure exasperation. At that time, one certain person’s work with the ins and outs of the
abort method really saved the day.
So, Peter-Paul Koch, thank you for your superb XMLHTTP notes: abort() and Mozilla bug article.
PS. You can also see it in use for the search
input element of this very web site. 🙂 DS.