Interface elements for jQuery - Documentation - Autocomplete

Autocomplete

Attach AJAX driven autocomplete/sugestion box to text input fields.

Features:

• autofill
• keyboard and mouse navigation
• delayed AJAX request
• animated suggestion box
• minimum characters before the AJAX request is started
• caching

example

Options:

source	string	mandatory	the URL to request
delay	integer	optional	the delayed time to start the AJAX request
autofill	boolean	optional	when true the first sugested value fills the input
helperClass	string	mandatory	the class applied to sugestion box
selectClass	string	mandatory	the class applied to selected/hovered item
minchars	integer	optional	the number of characters needed before starting AJAX request
fx	opject {type:[slide|blind|fade]; duration: integer}	optional	the fx type to apply to sugestion box and duration for that fx
onSelect	function	optional	this function triggers when an option is selected and applies to the input field. Receives one parameter an object of key/value pairs based on XML tags returned by server backend. This way you can send more information to the user.
onShow/onHide	function	optional	this functions triggers when the suggestion box is shown or hide. With this you can apply more effects to the suggestion box. The functions applies to input field and get two parameters: the suggestion box and the IFRAME used on Internet Explorer to overlap the SELECT tags.
onHighlight	function	optional	A function to be executed whenever an item it is highlighted
inputWidth	Boolean	optional	when true the suggestion box will scale to the input's width
multiple	Boolean	optional	when true the autocompleter will accept multiple suggestions
multipleSeparator	String	optional	separator for multiple suggesions

To use 'slide' or 'blind' fxs you need Interface FX Slide or Blind plugins.

Code sample:

$('#autocompleteMe').Autocomplete(
	{
		source: 'ajaxserver.asp',
		delay: 700,
		fx: {
			type: 'slide',
			duration: 400
		},
		autofill: true,
		helperClass: 'autocompleter',
		selectClass: 'selectAutocompleter',
		minchars: 1,
		onSelect : function,
		onShow : function,
		onHide : function
	}
		);

XML response

The response of server must be an XML with this format:

<?xml version="1.0"?>
<ajaxresponse>
  <item>
    <text><![CDATA[text to display]]></text>
    <value><![CDATA[value to fill]]></value>
  </item>
</ajaxresponse>

Each item is reprezented by an item tag that has two child nodes: text - the text representation for item in sugestion box; value - the value to fill the text input. You can add more child nodes to the item tag to use it with onSelect callback.