Yet another AutoComplete (Google Suggest)


Example Dictionary Search (View Without Scriptaculous Effects)

In this example, I use the same dictionary I used in the WordLadder coding challenge. Simply start typing a word and the suggest tool will give you results.

(3 letters minimum required to trigger a suggestion)

Source Code:

<script type="text/javascript" src="../lib/prototype/prototype.js"></script>
<script type="text/javascript" src="../lib/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>
<input type="text" id="my_ac" name="my_ac" size="45"/>
<script type="text/javascript">
	new AutoComplete('my_ac', 'ac.php?s=', {
		delay: 0.25
	});
</script>

API Documentation

Parameters

bindField The ID of the form input field you want to monitor for autocompletion. Could also be the actual DOM Input element.
action URL of the search script. This script should return an XML document of the following schema:
<?xml version="1.0"?>
<Suggestions>
	<suggestion>beau</suggestion>
	<suggestion>beauty</suggestion>
	<suggestion>beautiful</suggestion>
	<suggestion>beaufort</suggestion>
</Suggestions>
options object of optional parameters (see below)

Options

size size of the result screen to show (# of options).
Default: 10
cssClass CSS class name of the select object.
onSelect Function to execute upon option selection. The bindField element will be passed in as the only parameter to this function.
threshold # of characters to require before a suggestion is made.
Default: 3
delay Time in seconds to wait before a suggestion is triggered.
Default: .2