Next Prev

Scriptaculous Autocomplete

Read more and download "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

new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<html>
<head>
<base href="http://www.ajaxdaddy.com/ajax/prototype/autocomplete/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
  <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>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Bill

2009-02-23 08:13:23

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)?

Redouane

2009-01-04 03:38:07

greaaaat!!!

Jan

2008-12-14 13:37:24

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?

Tora

2008-09-18 07:28:22

@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

Tora

2008-09-18 07:24:51

@DataSkill yes, in html, where you want you should write a div or a span like this: and add the indicator option in Ajax.Autocompleter('search','update','response.php', { indcator:'loader'}); try this. bye

2008-08-21 09:30:43

The 'response.php' just returns a dataset in that format :

country1
country2

BVX89

2008-07-24 13:57:47

You can't see the content of the response.php because it's a serverside script. You'll find all the info you need here: http://www.roscripts.com/Ajax_autosuggest_autocomplete_from_database-154.html

Caballerus

2008-07-03 11:46:37

what exists in response.php? Is a cruel doubt...

Yosh

2008-06-20 00:42:14

hi, it dosnt work in the example

Bmwmpower

2008-06-17 10:47:54

can i replace 'response.php' with asp page

NikoR6

2008-05-20 07:38:39

Do you know if I can control the ajax request. For exemple, do nothing if the input in numeric... ?

2008-04-13 18:41:34

i like it

Sturmi

2008-01-30 07:12:35

Nice tutorial thx! But the link to "Read more and download "Scriptaculous Autocomplete"" does not work ;) would be pleasant to fix it

MPhk

2007-11-19 05:39:24

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.

Neophytos

2007-11-04 02:36:24

Interesting...

MPhk

2007-10-25 07:39:22

As if the font-family CSS-property is totally ignored in IE.

MPhk

2007-10-25 06:39:42

Do you have any idea why the font of the elements in the auto-suggestions list looks different IE than the one in Firefox?

EsteMAN

2007-10-23 08:09:05

DOUGH!! response.php source :P It returns an unordered list, but... What is the

for?

EsteMAN

2007-10-23 08:05:18

I too would be interested in seeing the code for response.php Does it returns an unordered list?

Stelio

2007-09-30 02:11:10

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 ;-( ?

Todd

2007-09-20 18:34:05

I too would be interested in seeing the code for response.php

Sachin Kambli

2007-09-13 00:12:00

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

Kaveh Mirzaei

2007-07-28 02:43:14

Will you plz put your source code, The original code doesn't work with navigation keys!

Dataskills

2007-07-18 11:50:32

nice example. thanks. is it possible to get a loading image?

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Scriptaculous Autocomplete

Comment on this example