Monday, September 24th, 2007
Ajaxian Featured Tutorial: AutoCompleter 101
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”:
- <script src="jquery-1.2.1.pack.js" type="text/javascript"></script><script type="text/javascript">
- function lookup(inputString) {
- if(inputString.length == 0) {
- // Hide the suggestion box.
- $(‘#suggestions’).hide();
- } else {
- $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
- if(data.length >0) {
- $(‘#suggestions’).show();
- $(‘#autoSuggestionsList’).html(data);
- }
- });
- }
- } // lookup
- function fill(thisValue) {
- $(‘#inputString’).val(thisValue);
- $(‘#suggestions’).hide();
- }
- </script>
You can see it in action and download the source.





3 rating from 42 votes
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)…
Also, autocompletes should use a timer loop to handle the “fast typer, slow connection” scenario.