Auto Complete 4.0

Auto Complete sends input from a user to a script server side, and creates a drop down with the JSON data returned. It supports the metadata plugin, as well as script level caching. A few examples are included on this page, but check out the docs for a full list of features.

A list of commonly misspelled words in English found at http://www.esldesk.com/esl-quizzes/misspelled-words/misspelled-words.htm is used as the sample result set.

Normal Initiation

$('input[name=search1]').autoComplete();

Prevent form submission when running callbacks on selection

$('input[name=search2]').autoComplete({
	preventEnterSubmit: true,
	onSelect: function(data, $li){
		alert('You have selected ' + data.value);
	}
});

Send requests to different page with extra POST parameters,
returning with no display value.

$('input[name=search3]').autoComplete({
	ajax: 'ajax2.php',
	postData: {
		hook1: 'Do something on hook1',
		hook2: 1942,
		hook3: 'Do something with hook3'
	}
});

Use the metadata plugin to set limitations on a per input basis.

$('input[name=search4]').autoComplete({
	onMaxRequest: function(val){
		$(this).css('background-color', 'red');
		alert('Sorry, but you have used up the maximum number of reqests allowed, and ' + val + ' was not processed');
	}
});
<input type='text' name='search4' style='width:300px;' class='someclass {minChars: 2, maxRequests: 10}' />

Trigger autoComplete by clicking an external button.

$('#input-c').autoComplete();
$('#submit-c').click(function(){
	$('#input-c').autoComplete({
		useCache: false,
		minChars: 0,
		postData: {
			all: true
		}
	}, -1).focus();
});

Supply a data set for autoComplete to use.

$('input[name=search6]').autoComplete({
	dataSupply: ['jane', 'john', 'doe', 'amy', 'alice', 'louis', 'liz', {value: 'mark'}, {value: 'merideth', display: 'Merideth Johnson'}]
});

Be sure to check out the docs for a full list of options.

Back to Original Article