AutoComplete for Prototype.js

Ajax Powered Autocomplete for Prototype.js

• Icon Notifier (Spinner between Ajax calls)
• Fire onAjaxFailure events when an error occurs during Ajax calls
• Be able to set a custom width
• A more flexible and dynamic creation of the autocomplete text field

The object is pretty complete but it could be nice to include more features. Here some of them:

• Multiple column support. Just like gmail does, when a user enters a comma or semicolon, a new list is created when inserting any character after that. -done (thanks Réda HADJOUTI!)
• Dynamic themes. Being able to change the style of the autocomple and dropdown list could be a really nice feature to have.
• More effects to show/hide the dropdown list (SlideDown|SlideUp).
• (If anyone of you does it, please contact me so whether I can post it on my blog or have a link to your project)

How it works

a) Configure the HEAD section of your HTML page:

<!-- insert the styles of the autocomplete box  -->
<link rel="stylesheet" href="css/autocomplete.css" type="text/css" media="screen" charset="utf-8" />

<!--  javascript libraries required  -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/autocomplete.js"></script>

b) Set the field’s onfocus event to automatically create the autocomplete box (you can also create them differently -ie onDOM load):

<!– IMPORTANT! MAKE SURE YOU INCLUDE autocomplete=’off’ on the field! -Thanks Ryan –>
<span class="ac_holder" style="margin-left:100px">
<input style="width: 200px" type="text" id="test_json" autocomplete=”off” onFocus="javascript:
var options = {
script:’test.php?json=true&limit=6&’, // test.php -> dropdown list results
varname:’input’, // post variable
json:true, // we expect the server response in JSON format
shownoresults:true, // displays no results message if no match is found
maxresults:16, // maximum number of results
callback: function (obj) { $(‘json_info’).update(‘you have selected: ‘+obj.id + ‘ ‘ + obj.value + ‘ (‘ + obj.info + ‘)’); }
};
// here is where we do the magic!
var json=new AutoComplete(‘test_json’,options);return true;" value="" />
</span><span id=’json_info’></span>

As you can see on the code, the ‘script’ property of the object is where we write the server page to call via AJAX in order to get the dropdown results. Let’s view the important lines within this test.php page:

// here we collect the POSTED variable
// what to search?
$input = strtolower( $_GET['input'] );
$len = strlen($input);
// how many results we display?
$limit = isset($_GET['limit']) ? (int) $_GET['limit'] : 0;

Now, the way you find matches from such POSTED variable is up to you, it could be checked against an array (as in the examples included) or against a database by using the LIKE SQL statement.

DOWNLOAD
Some people have problems downloading (I think it is a problem of the downloads manager plugin). If you have problems downloading please use this mirror.

download: Ajax Powered AutoComplete (5.87KB) added: 08/12/2009 clicks: 2767 description:

DISCLAIMER
I do not want to take any credit for the creation of the demos that I include within the compressed zip file. I have reused completely the work of Timothy, he should be the one granted with that.