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>

Scriptaculous Autocomplete demo

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



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