Interface elements for jQuery - Documentation - Autocomplete

Autocomplete

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

Features:

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.

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb

Linux tutorials · Dedicated servers