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 script and the conceptThe result of my efforts is AJAX Suggestions! The general idea is that, as soon as you type a couple of characters into an
inputelement. 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
inputelement, and when one of the results are chosen, it replaces the value in the
ImplementationThe script looks for elements that have the CSS class
ajax-suggestionand 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 versionsI'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).
/* 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 */
init()method of the
ajaxSuggestionsobject, with the approach you find suitable, when using the DOMAssistant version.
A thanks to PPKIn 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
abortmethod 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
inputelement of this very web site. :-) DS.