Posted by Kromey at 3:51pm Jan 2 '10Auto complete requires the following JavaScript skills in order to be implemented:
1) Event triggers - you've got to be able to trigger your AJAX-y search based on the user entering something
2) Advanced timers - triggering the moment the user types a key is insanity; rather, you want a short delay. I say "Advanced timers" here because you need to be able to cancel the previous timer on the next key press.
3) AJAX - actually libraries like JQuery or Prototype make this really easy.
4) DOM manipulation - you need to either create and manipulate a DOM element to show the drop-down of search suggestions, or else manipulate an existing hidden element (I much favor the former approach). This will contain the search responses.
I recommend that your server-side script that generates the search suggestions generate a prettified list of links; the other option is to return either an XML or JSON document that you can parse with JavaScript to generate the list on the fly on the user's page, but that adds a lot of complexity and in an application like this does not offer much real benefit.
The basic process you'll need to follow is thus:
1) Attach an event listener to the search box. This listener should be attached to the keypress event.
2) The listener's callback function should start a timer (see JavaScript's built-in setTimeout function). It should clear the timer (see the clearTimer (I think that's what it's called) function) first - this way a subsequent keypress will cancel the previous timer and start it over. This prevents the situation where a user types faster than the AJAX-y stuff can function, and they see (after they've typed) a bunch of now-stale responses flash quickly across the screen.
3) The timer's callback function should initiate the AJAX query. Do use a library like JQuery, Prototype, or any of the numerous options out there - you don't want to muck with the cross-browser headaches of doing it yourself, trust me!
4) The AJAX query's callback function (the one to be run upon successful completion of the AJAX query) should put the response into a DOM object (probably a div element) and then show that object immediately below the search box.
Other things to consider in this implementation:
* Consider modifying step 3 above to cancel a previous AJAX query that may not have returned yet, if your library allows it. Be warned that some libraries interpret a cancellation as a successful completion for the purposes of calling the AJAX query's callback function (don't ask me why - seems like a bug to me!), so you'll need a way to check for this.
* Consider how you will hide the list of suggestions. I recommend attaching a listener to the search box's onblur event that will hide it after a short delay - this should allow the user to click on a suggestion or to go elsewhere if they've changed their mind. A more advanced option would be to hide the list when the search box loses focus (that's the onblur event) but only if the user did not click within the list of suggestions (could use the suggestion list's div element's onmousein and onmouseout events). The easiest option, however, is to add a "Close" link within the list that the user would have to click on to close it; not as pretty as a well-implemented way to automatically close it, but effective nonetheless.
1) Event triggers - you've got to be able to trigger your AJAX-y search based on the user entering something
2) Advanced timers - triggering the moment the user types a key is insanity; rather, you want a short delay. I say "Advanced timers" here because you need to be able to cancel the previous timer on the next key press.
3) AJAX - actually libraries like JQuery or Prototype make this really easy.
4) DOM manipulation - you need to either create and manipulate a DOM element to show the drop-down of search suggestions, or else manipulate an existing hidden element (I much favor the former approach). This will contain the search responses.
I recommend that your server-side script that generates the search suggestions generate a prettified list of links; the other option is to return either an XML or JSON document that you can parse with JavaScript to generate the list on the fly on the user's page, but that adds a lot of complexity and in an application like this does not offer much real benefit.
The basic process you'll need to follow is thus:
1) Attach an event listener to the search box. This listener should be attached to the keypress event.
2) The listener's callback function should start a timer (see JavaScript's built-in setTimeout function). It should clear the timer (see the clearTimer (I think that's what it's called) function) first - this way a subsequent keypress will cancel the previous timer and start it over. This prevents the situation where a user types faster than the AJAX-y stuff can function, and they see (after they've typed) a bunch of now-stale responses flash quickly across the screen.
3) The timer's callback function should initiate the AJAX query. Do use a library like JQuery, Prototype, or any of the numerous options out there - you don't want to muck with the cross-browser headaches of doing it yourself, trust me!
4) The AJAX query's callback function (the one to be run upon successful completion of the AJAX query) should put the response into a DOM object (probably a div element) and then show that object immediately below the search box.
Other things to consider in this implementation:
* Consider modifying step 3 above to cancel a previous AJAX query that may not have returned yet, if your library allows it. Be warned that some libraries interpret a cancellation as a successful completion for the purposes of calling the AJAX query's callback function (don't ask me why - seems like a bug to me!), so you'll need a way to check for this.
* Consider how you will hide the list of suggestions. I recommend attaching a listener to the search box's onblur event that will hide it after a short delay - this should allow the user to click on a suggestion or to go elsewhere if they've changed their mind. A more advanced option would be to hide the list when the search box loses focus (that's the onblur event) but only if the user did not click within the list of suggestions (could use the suggestion list's div element's onmousein and onmouseout events). The easiest option, however, is to add a "Close" link within the list that the user would have to click on to close it; not as pretty as a well-implemented way to automatically close it, but effective nonetheless.
Time to grind some JavaScript XP - Kromey