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

Visit PhpDaddy.com

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

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