# Auto Complete 4.1 (backwards compatible page)

This page is an exact copy of the 4.1 index.html page with 1 minor change. At the top of the script tag, the backwardsCompatible global default flag is set to true, to show that all callbacks still work as designed in 4.1.
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