Auto Complete 4.1

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();

/**
 * Button code for above example
 */
// Add enabling feature (disable to begin with)
$('input[name=enable-1]').attr('disabled', 'true').click(function(){
	$('input[name=search1]').autoComplete();
	$('input[name=destroy-1]').attr('disabled', false);
	$(this).attr('disabled', 'true');
});
// Add disabling feature
$('input[name=destroy-1]').click(function(){
	$('input[name=search1]').autoComplete('destroy');
	$('input[name=enable-1]').attr('disabled', false);
	$(this).attr('disabled', 'true');
});

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.

// Auto-complete using metadata and maxiumum requests
$('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');
	}
});
// Clear requests and remove red background
$('input[name=search4-submit]').click(function(){
	$('input[name=search4]').autoComplete('flush').css('background-color', 'white').val('').focus();
});
<input type='text' name='search4' style='width:300px;' class='someclass {minChars: 2, maxRequests: 10}' />

Trigger autoComplete by clicking an external button.

// Auto-complete with trigger
$('#input-c').autoComplete();
// Trigger full 'c' list
$('#submit-c').click(function(){
	$('#input-c').autoComplete('button.ajax', {all:true, letter:'c'}, 'ALL_LETTER_C_REQUESTS');
});
// Trigger full 'd' list
$('#submit-d').click(function(){
	$('#input-c').autoComplete('button.ajax', {all:true, letter:'d'},  'ALL_LETTER_D_REQUESTS');
});
// Clear just the cache, not the # of requests
$('#submit-flush').click(function(){
	$('#input-c').autoComplete('flush', true);
});

Supply a data set for autoComplete to use.

// Autocomplete on User Supplied data
$('input[name=search6]').autoComplete({
	dataSupply: ['jane', 'john', 'doe', 'amy', 'alice', 'louis', 'liz', {value: 'mark'}, {value: 'merideth', display: 'Merideth Johnson'}]
});
// Trigger whole list
$('#search6').click(function(){
	$('input[name=search6]').autoComplete('button.supply');
});

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

Back to Original Article