Autocomplete or Typeahead is one of the most common Ajax Patterns. For my example I am using the script aculo us libary respectively the ajax-autocomplete control. The goal of this small tutorial is to create an type ahead mechnism for multiple tags in one input field. The problem with the basic feature of the autocomplet controller of script aculo us is, that it only handles the value of an element as input string (not only a part of it as we need it for this solution). But we want the user to be able to enter several tags and use the autocomplete feature ONLY for the last entered tag. Here is a screen of what the final solution will look like:
First of all the we create an input field and the hidden div where the elements will apear (also see the above linked dokumentation on how to use the script aculo us libary):
Then we create an instance of the autocompleter object:
We are using here our own updateElement function that will process the tags again in the correct order.
On the server side we use a php script which performs a db lookup or whatever to gather the element fitting to the recieved input value and returns it as an unsorted list. Remeber: we recieve all tags in with the http post, so we have to extract only the last one and work with this value.
";
while ($row = mysql_fetch_assoc($result)) {
echo "".$row['tag']." ";
}
echo "";
mysql_free_result($result);
mysql_close($dbh);
}
}
?>
Leave a Reply