October 26th, 2008
Tutorial : Auto Completer using Prototype, Script.aculo.us
How many of you have always dreamt of creating an Auto Suggest Box. I bet everyone must have seen one of these somewhere or the other. if you use Gmail to send mails, you might recall that while typing the To address, Gmail shows a probable list of users from your address book. Nowadays most of the modern browsers also have this Auto Suggest control built in them, i.e when the user begins to type in a text box, a menu appears below the text offering completion suggestions.
Today I am going to teach you how to create an Auto Suggest Box using Prototype, Script.aculo.us. The script.aculo.us auto suggest box (autocompleter) replicates this control, but gives the developer control of the probable suggestions.
Index
- Page 1 : Introduction and
- Page 2 : Auto Suggest Box (local)
- Page 3 : AJAX Auto Suggest Box (remote via PHP/MySQL)
Demo & Source Download
Type out the name of the states of U.S.A.
Local Auto Suggest Box Demo : Click Here
Remote Auto Suggest Box Demo : Click Here
Download Source Here
Problem Statement
Lets try creating an Auto Suggest Box which displays the states of America as the user begins to type a state’s name in the text box.
Solution
Before using any functions, first we need to make our HTML page i.e how the suggestion box is going to look.
- Create an empty HTML file.
-
First, to take the input of any state name from the user we need an input box.
Second, we need a container to display all the probable suggestions i.e different names of states according to User input.Lets create these right now.
<!-- This code will be added inside the <strong><BODY></strong> tag of the HTML page --> <input type="text" name="state_input" id="state_input" size="30" /> <div id="state_suggestions"><!-- container for list of probable suggestions !--></div> -
Now that we have designed our suggestion box, its time to implement the Auto Suggest Box method. Since this method is readily available as a part of Script.aculo.us, we need to include the scriptaculous file, and since scriptaculous depends on prototype, we need to include the prototype file to our HTML document. Type following code inside the <HEAD> tag.
<script src="js/lib/prototype.js" type="text/javascript"></script> <script src="js/src/scriptaculous.js" type="text/javascript"></script> -
The HTML page should look something like this.
<!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> </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>
Now that we have a HTML page ready, preview it. Obviously it won’t work yet. We still have to define the AutoCompleter function.
There are 2 ways to achieve our goal. Script.aculo.us’s Autocompleter comes in two flavors.
- Autocompleter.Local : The local array autocompleter. Used when you’d prefer to inject an array of autocompletion options into the page, rather than sending out Ajax queries.
- Ajax.Autocompleter : Which relies on a remote server to give it suggestions, making an AJAX Request whenever suggestions need to be retrieved.
Now both have thier Pros and Cons. I`ll explain each one of them and how they can be used.
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.