Scriptaculous Autocomplete

An Ajax autosuggest script is supposed to help the visitor and present in real time (as they type) some possible results based on their entered words/characters. In my opinion, this is a great feature to enhance the user experience. It's very easy to build an autocomplete form using scriptaculous and prototype. You just need one line of javascript <br /> <strong> new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options); </strong>

Download code Visit demo

Tags: autocomplete prototype

<< MooTools Autocomplete Dojo Fisheye >>

Scriptaculous Autocomplete demo

Changes to the code below will update the demo above in real time.

<title>X Scriptaculous - Ajax auto-suggest</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  
	<script src="javascript/prototype.js" type="text/javascript"></script>
  <script src="javascript/effects.js" type="text/javascript"></script>
  <script src="javascript/controls.js" type="text/javascript"></script>
	<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
	<body>
    <div id="container">
			<form method="get" action="">
				<label for="testinput">Search for a country name</label><br />
				<input type="text" id="search" name="search" autocomplete="off" class="input" value="" /><br />
				<div id="update" style="display: none; position:relative;"></div>
				<input type="image" name="register" class="submit-btn" src="http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" />
			</form>
			<script type="text/javascript">
			  //alert('bau');
        new Ajax.Autocompleter('search','update','response.php', { tokens: ','} );
        
			</script>
		</div>
	</body>
</html>

July 18, 2007, 11:50 a.m. - dataskills: nice example. thanks. is it possible to get a loading image?
July 28, 2007, 2:43 a.m. - Kaveh Mirzaei: Will you plz put your source code, The original code doesn't work with navigation keys!
Sept. 13, 2007, 12:12 a.m. - sachin kambli: I like way of coding style but i still cant able to get source code for response.php can you plz help me as soon as you can
Sept. 20, 2007, 6:34 p.m. - Todd: I too would be interested in seeing the code for response.php
Sept. 30, 2007, 2:11 a.m. - Stelio: Using the arrow keys (up) to navigate through the autocomplete list causes a page jump when the browser's view port is smaller than the list's length. How can i fix that ;-( ?
Oct. 23, 2007, 8:05 a.m. - EsteMAN: I too would be interested in seeing the code for response.php Does it returns an unordered list?
Oct. 23, 2007, 8:09 a.m. - EsteMAN: DOUGH!! response.php source :P It returns an unordered list, but... What is the <div class="entry"> for?
Oct. 25, 2007, 6:39 a.m. - MPhk: Do you have any idea why the font of the elements in the auto-suggestions list looks different IE than the one in Firefox?
Oct. 25, 2007, 7:39 a.m. - MPhk: As if the font-family CSS-property is totally ignored in IE.
Nov. 19, 2007, 5:39 a.m. - MPhk: The thing is that in IE the font anti-aliasing is lost after fading the text. There is no (obvious, simple) way to fix it though, so probably we'll have to live with this.
Jan. 30, 2008, 7:12 a.m. - Sturmi: Nice tutorial thx! But the link to "Read more and download "Scriptaculous Autocomplete"" does not work ;) would be pleasant to fix it
May 20, 2008, 7:38 a.m. - NikoR6: Do you know if I can control the ajax request. For exemple, do nothing if the input in numeric... ?
June 17, 2008, 10:47 a.m. - bmwmpower: can i replace 'response.php' with asp page
June 20, 2008, 12:42 a.m. - Yosh: hi, it dosnt work in the example
July 3, 2008, 11:46 a.m. - Caballerus: what exists in response.php? Is a cruel doubt...
July 12, 2008, 3:17 a.m. - sandeep karmakar: The download script does not work it also do not contain the database values
Aug. 21, 2008, 9:30 a.m. - G: The 'response.php' just returns a dataset in that format : <ul> <li>country1</li> <li>country2</li> .. </ul>
Sept. 18, 2008, 7:24 a.m. - Tora: @DataSkill yes, in html, where you want you should write a div or a span like this: <span id="loader" style="display:none"><img src="img/loading.gif"> Loading...</span> and add the indicator option in Ajax.Autocompleter('search','update','response.php', { indcator:'loader'}); try this. bye
Sept. 18, 2008, 7:28 a.m. - Tora: @DataSkill sorry, html tag won't work in this list. {span id="loader" style="display:none"}{img src="img/loading.gif"}Loading...{/span} and add the indicator option in Ajax.Autocompleter('search','update','response.php', { indicator:'loader'}); try this. bye
Dec. 14, 2008, 1:37 p.m. - Jan: When I'm using the arrow buttons (up and down) to select an item from the list the whole page is scrolling. Anyone knows how to help this problem?
Feb. 23, 2009, 8:13 a.m. - Bill: Hi -- this works great for a list, but I need an AutoComplete to show a table. I can have it present a scrollable table with a fixed header and footer, but when I select a row it does not return anything. I get a "$(element) has no properties" from effects.js. Is it possible to hook a table into this function? If not, can I do something like emulate a fixed column list (5 columns per row)?
April 2, 2009, 12:47 a.m. - Ben Althauser: I wonder if setting position:fixed for the header might aleviate the body scroll issue. Alternatively, you can captcure the arrow up key function using javascript and have it scroll the document body 0 pixels every time it is pressed. This should override the browser.
April 9, 2009, 8:03 p.m. - Ben Althauser: You'll notice if you go to a site, and the input is focused, no body scrolling occurs.... so add [CODE] onkeypress = document.getElementById('q').focus(); [/CODE] worked great for me. if any of you need a onkey that loops (the top goes to the bottom result & vice versa) hit m e up at falkon303@gmail.com. - Best
April 9, 2009, 8:15 p.m. - Ben Althauser: Here's the code I wrote - <HTML> <HEAD> <style type="text/css"> .over {background-color:#00FF00;} .out {background-color:#FFFFFF;} </style> <SCRIPT> function getArrows (evt, curval) { var keyCode = document.getElementById ? evt.keyCode : 0; var rowsel = curval.split('_'); if (keyCode == 40) { document.getElementById('q').focus(); term = (parseInt(rowsel[1]) + 1);ac = 'ac_1';} else if (keyCode == 38) { document.getElementById('q').focus(); term = (parseInt(rowsel[1]) - 1);ac = 'ac_9';} document.getElementById(curval).className = 'out'; if (document.getElementById(rowsel[0] + '_' + term) == null) {numinc = ac;} else {numinc = rowsel[0] + '_' + term;} document.getElementById(numinc).className = 'over'; document.getElementById('q').value = numinc; return true; } </SCRIPT> </HEAD> <BODY ONKEYDOWN="getArrows(event, document.getElementById('q').value)"> <ul id="ac_list" name="ac_list"> <li id="ac_1" name="ac_1" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 1</li> <li id="ac_2" name="ac_2" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 2</li> <li id="ac_3" name="ac_3" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 3</li> <li id="ac_4" name="ac_4" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 4</li> <li id="ac_5" name="ac_5" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 5</li> <li id="ac_6" name="ac_6" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 6</li> <li id="ac_7" name="ac_7" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 7</li> <li id="ac_8" name="ac_8" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 8</li> <li id="ac_9" name="ac_9" onMouseOver="this.className = 'over';document.getElementById('q').value = this.id;" onMouseOut="this.className = 'out';" >this 9</li> </ul> <input name="q" id="q" type="text" value="ac_9"> <input name="length" id="length" type="hidden" value="ac_9"> </BODY> </HTML>
April 10, 2009, 2:21 a.m. - Francesco: I changed the script php in asp classic, it works perfectly in IE while in Firefox does not work and there aren't errors in the console. Why?
April 20, 2009, 10:03 a.m. - Eugene: That's not works by me
April 22, 2009, 4:32 p.m. - rece: Tu ejemplo es muy bueno pero es posible que tambien puedas colocar el archivo response.php, lo que sucede es que estoy elaborando un sitio web, el problema es que no se ejecuta en firefox, al parecer un error en controls.js, mi correo es raulmace@hotmail.com, gracias.
April 28, 2009, 6:17 p.m. - dean: it's greattt! i like it
Sept. 3, 2009, 3:43 a.m. - kendin yap: this is be very helpfull for my applications. thanks
Oct. 19, 2009, 2:43 p.m. - Dan: Gold, especially with that loader image. Wroks great thanks.
April 5, 2010, 4:14 a.m. - Tiling: Very nice tutorial. Thanks!
April 14, 2010, 8:15 a.m. - dontwork: bullshit doesn't work with opera
July 19, 2010, 10:40 a.m. - Jacques Vermeulen: Just trying it out!
April 7, 2011, 11:13 a.m. - mariano: dosn't work with ie9!!!!!
Sept. 26, 2011, 12:19 p.m. - Theo Zaf: This is not working for me in IE6 and FF 3.6 not even the example you have here...
Nov. 30, 2011, 9:19 p.m. - seno: This does not work in IE 9