Autocomplete for Prototype 1.5.1

Usage

The script requires prototype.js and a single javascript file to be included in the HEAD:

• autocomplete.js

A normal text field is transformed into an AutoComplete text field dynamically by using the following code (placed anywhere you want -in the examples above they are created on the onfocus textfield event):

var options = {
		script:'test.php?json=true&limit=6&',
		varname:'input',
		json:true,
		shownoresults:true,
		maxresults:16,
		callback: function (obj) { $('json_info').update('you have selected: '+obj.id + ' ' + obj.value + ' (' + obj.info + ')'); }
		};
		var json=new AutoComplete('test_json',options);

The options object contains the options for the AutoComplete instance. Note that the script variable includes the question mark (?) at the end. This is to allow other variables to be passed to the script via GET (to use POST method, you will need to modify the AJAX (-doAjaxRequest function) request and also the , for example script: "http://www.yourserver.com/backend.php?list=countries&". The varname option is the name of the variable that should contain the current value of the text field, and is simpy added on to the end of the script variable when the script is called, along with the current value of the text field, giving:

http://www.yourserver.com/backend.php?list=countries&variableName=currentValue

The script variable can also be a function:

script: function (input) { return "test.php?input="+input+"&testid="+document.getElementById('testid').value; }

This allows you to build the script URL dynamically, passing variable data from somewhere else in your document (eg. from another field, as in the example above). If the script returns false, no AJAX request will be made.

The XML output from the script should have the following structure (you can modify this and its client handle via the setSuggestions function of the AutoComplete object:

<results>
	<rs id="1" info="">Foobar</rs>
	<rs id="2" info="">Foobarfly</rs>
	<rs id="3" info="">Foobarnacle</rs>
</results>

A JSON object should have the following structure:

{ results: [
	{ id: "1", value: "Foobar", info: "Cheshire" },
	{ id: "2", value: "Foobarfly", info: "Shropshire" },
	{ id: "3", value: "Foobarnacle", info: "Essex" }
] }

The AutoComplete object creates the following XHTML code, inserting as the last element in the body:

<div style="left: 347px; top: 1024px; width: 400px;" class="autosuggest" id="as_testinput_xml">
	<div class="as_header">
		<div class="as_corner"></div>
		<div class="as_bar"></div>
	</div>
	<ul id="as_ul">
		<li>
			<a name="1" href="#">
			<span class="tl"> </span>
			<span class="tr"> </span>
			<span><em>W</em>aldron, Ashley<br><small>Leicestershire</small></span>
			</a>
		</li>
		<li>
			<a name="2" href="#">
			<span class="tl"> </span>
			<span class="tr"> </span>
			<span><em>W</em>heeler, Bysshe<br><small>Lincolnshire</small></span>
			</a>
		</li>
	</ul>
	<div class="as_footer">
		<div class="as_corner"></div>
		<div class="as_bar"></div>
	</div>
</div>

The list can then be styled using normal CSS. Check out the CSS file.

Options

The options object can contain the following properties:

{id:"1", value:"Foobar", info:"Cheshire"}

Timeouts

The default timeout is set at 2500 milliseconds. After two and a half seconds of inactivity the list closes itself. However, this timeout is reset each time the user types another character. Furthermore, if the user moves the mouse pointer over the AutoComplete list, the timeout is cancelled altogether, until the mouse pointer is moved off the list.