# Auto Complete 5.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.
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.
Currently in Focus:
Previously in Focus:
+ Open Code

    var $div = $('#AutoCompleteFocus');
    $('input[type=text]').focus(function(){
    	var f = $.autoComplete.getFocus(), p = $.autoComplete.getPrevious();
    	$div.find('.current span').html('#' + $.autoComplete.focus + ": '" + $(f).attr('name') + "'");
    	$div.find('.previous span').html('#' + $.autoComplete.previous + ": '" + $(p).attr('name') + "'");
    });

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'
    	}
    });

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(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, autofillm 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