October 26th, 2008
Tutorial : Auto Completer using Prototype, Script.aculo.us
Autocompleter.Local
Click Here for a Demo.
It is obviously less complicated, since the options are given directly, so no AJAX requests, thus quicker !
But the suggestions are a little too linear (i.e no big logic is used to match the suggestions with the given string) and obviously the suggestions will be limited.
Extracted from script.aculo.us :
Syntax
new Autocompleter.Local(id_of_text_field, id_of_div_to_populate, array_of_strings, options);
The syntax is pretty straigtforward. The first 3 parameters are very obvious. The last parameter options can have the following sub parameters.
- choices – How many autocompletion choices to offer Default – False
- partialSearch – If false, the autocompleter will match entered text only at the beginning of strings in the autocomplete array. Defaults to true, which will match text at the beginning of any word in the strings in the autocomplete array. If you want to search anywhere in the string, additionally set the option fullSearch to true Default – off
- fullSearch – Search anywhere in autocomplete array strings. Default – False
- partialChars – How many characters to enter before triggering a partial match (unlike minChars, which defines how many characters are required to do any match at all). Default – 2
- ignoreCase – Whether to ignore case when autocompleting. Default – True
Now, Assuming you have understood the syntax, lets try to create our own AutoCompleter, all you have to do is create an object of Autocompleter.Local
Javascript Example Code :
<script type="text/javascript">
document.observe('dom:loaded', function() { //When the page is loaded, execute this
new Autocompleter.Local('state_input', 'state_suggestions',['Alabama','Alaska','Arizona','Arkansas','California']); //follows the constructor. Since no options are specified, default values will be taken.
//1st parameter - state_input = input id
//2st parameter - state_suggestions = div id
//3st parameter - Array of states
});
</script>
Javascript + HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
document.observe('dom:loaded', function() {
new Autocompleter.Local('state_input', 'state_suggestions',['Alabama','Alaska','Arizona','Arkansas','California']);
});
</script>
</head>
<body>
<input type="text" name="state_input" id="state_input" size="30" />
<div id="state_suggestions"><!-- container for list of probable suggestions !--></div>
</body>
</html>
Test it out. The AutoCompleter should work now, though it looks very shabby. We can give it a much better look. Just add the following style inside the <HEAD> tag.
CSS Code
<style type="text/css">
body {
font: 12px Tahoma;
}
#state_suggestions {
border: 1px solid #999;
background-color: #fff;
}
#state_suggestions ul {
list-style: none;
margin:0px;
padding:0px;
}
#state_suggestions li {
padding: 2px 3px;
}
#state_suggestions strong {
text-decoration: underline;
font-weight: bold;
}
#state_suggestions li.selected {
color: #fff;
background-color: #8c1000;
}
</style>
Voila, you have just created your very own, Auto Suggest Box. I know its pretty cool, but wait … there is more. It can be made much cooler. We can create a list of suggestions by querying a database as well or any remote page.
August 20, 2010 at 2:38 pm
In my page, I also have a calendar with a tooltip on mouse over of each day, now the tooltips are flickering. Any idea how to avoid this?
June 21, 2010 at 1:48 pm
It works for one textfield, but I haven't been able to make it work for two or more textfields in the same page. Any ideas???
June 22, 2010 at 11:02 am
I figured it out, I had an error in my code
April 15, 2010 at 1:10 am
works fine for me. thank you for the great tutorila!
April 6, 2010 at 2:06 pm
It works like a charm, Thanks
this is the best auto suggestion tutorial out of many that I have came across
May 11, 2010 at 9:34 am
anyone auto completer work in internet explorer 6?
January 7, 2010 at 10:39 pm
it doesnt work!
December 7, 2008 at 9:08 am
One of my buddies is always talking about your blog at work – finally came and checked it out today, nice work! I’m subscribing to your rss feed – keep on posting!
December 6, 2008 at 1:48 pm
Hi, thank you for this amazing tutorial. I downloaded the scripts and for some reason test2.html (autocomplete with PHP) does not work. I have Wamp installed in my computer and I changed the database information to match my Mysql database. I did use your sql file to write a table into my database. However, when I type into the text field, nothing happens. When I checked the Firebug, nothing happens. It looks like XMLHTTPRequest is not happening. Do you know what could be the problem? I did not change anything other than the database information.
November 24, 2008 at 11:35 pm
Hey, thank you so much for this tutorial. I’m really learning a lot from it. There is one problem though. I can’t get to page 3 of the tutorial. Every time I click on “3″ it reverts back to page 1. Could you see what’s going on? Thank you!
November 14, 2008 at 1:15 pm
Prototype solved all java script issues.