Monday, September 24th, 2007

Ajaxian Featured Tutorial: AutoCompleter 101

Category: Tutorial

Jamie Mcconnell has taken the age old classic Ajax autocompleter, and has created a simple tutorial using jQuery and PHP. Jamie takes time to explain the “why” as much as the “how”:

< View plain text >
javascript

  1. <script src="jquery-1.2.1.pack.js" type="text/javascript"></script><script type="text/javascript">
  2.  
  3. function lookup(inputString) {
  4.     if(inputString.length == 0) {
  5.         // Hide the suggestion box.
  6.         $(‘#suggestions’).hide();
  7.     } else {
  8.         $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
  9.             if(data.length >0) {
  10.                 $(‘#suggestions’).show();
  11.                 $(‘#autoSuggestionsList’).html(data);
  12.             }
  13.         });
  14.     }
  15. } // lookup
  16.  
  17. function fill(thisValue) {
  18.    $(‘#inputString’).val(thisValue);
  19.    $(‘#suggestions’).hide();
  20. }
  21. </script>

You can see it in action and download the source.

Posted by Dion Almaer at 7:27 am
2 Comments

+++--
3 rating from 42 votes

2 Comments »

Comments feed TrackBack URI

I know it’s a short intro not meant for copy pasting and the code supposed to be dirt simple, but a JSON stream would’ve been nicer allowing better separation of client and server side logic. Maybe I’m wrong, but these “show off” examples do more harm than good (sql inject anyone, no real error handling etc)…

Comment by skrd — September 25, 2007

Also, autocompletes should use a timer loop to handle the “fast typer, slow connection” scenario.

Comment by Andrew Warner — September 25, 2007

Leave a comment

You must be logged in to post a comment.