Auto Complete 5.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.

For those upgrading from 4.1, check out the changelog, the backwardsCompatible setting, and the 4.1-compatible page showing that upgrading works.

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.

var $div = $('#AutoCompleteFocus');
$.autoComplete.focus = function(){
	var focus = $.autoComplete.getFocus( true ), previous = $.autoComplete.getPrevious( true );
	$div.find('.current span').html(
		focus.length ? 'name=' + focus.attr('name') + "'" : 'Nothing in Focus'
	);
	$div.find('.previous span').html(
		previous.length ? 'name=' + previous.attr('name') + "'" : 'Nothing previously in focus'
	);
};

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

// Auto-complete preventing form submission, and firing onSelect function
$('input[name=search2]').autoComplete({
	// preventEnterSubmit is already flagged true by default
	onSelect: function(event, ui){
		alert('You have selected ' + ui.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'
	},
	postFormat: function(event, ui){

		// Add the current timestamp to each request
		ui.data.requestTimestamp = (new Date()).getTime();

		// Return the data object to be passed with the ajax function
		return ui.data;
	}
});

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

// Auto-complete using metadata and maximum requests
$('input[name=search4]').autoComplete({
	onMaxRequest: function(event, ui){
		$(this).css('background-color', 'red');
		alert('Sorry, but you have used up the maximum number of reqests allowed, and ' + ui.search + ' 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');
});

Allow for multiple words, autofill, and striped lists.

// Multiple words, autofill and striped lists
$('input[name=search7]').autoComplete({
	multiple: true,
	multipleSeparator: ' ',
	autofill: true,
	striped: 'auto-complete-striped',
	// Add a delay as autofill takes some time
	delay: 200
});

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

Back to Original Article