Add autoFill capabilities to jQuery-UI 1.8.1

AutoFill has been deprecated in the JQuery UI version of autocomplete, and the jquery.autocomplete plugin is no longer supported.

Here is a link to a github solutiuon. This will automatically select the first item in the list if you tab out of the field, and have "selectFirst: true" set as an option on your autocomplete call.

(function( $ ) {$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {    var autocomplete = $( this ).data( "autocomplete" ),        menu = autocomplete.menu;    if ( !autocomplete.options.selectFirst ) {        return;    }    menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );});}( jQuery ));

DEMO: http://jsbin.com/akile3

UPDATED 2: with TAB support! ;)

DEMO: http://jsbin.com/akile3/8

try something like this:

not sure if is what you want, anyway it autofill entire word if match something!

$(function() { var json_source = [        { "label": "Canada", "value": "Canada", "id": "1" },        { "label": "United States", "value": "United States", "id": "2" }];    $('<span id="hold"></span>').insertAfter('#regions');    var $text_was = $('#hold');    var $log = $('#log');    $("#regions").autocomplete({        minLength: 3,        source: json_source,        open: function(event, ui) {            var first_option = $('.ui-autocomplete li:eq(0) a').text();            $(this).text(first_option);            $text_was.text(first_option);        },        change: function(event, ui) {          var prev_text = $text_was.text() ? $text_was.text() : json_source[0].value ;            $log.empty();            var message = (prev_text != this.value) ?             'Nothing selected, input was ' + prev_text :             'Selected: ' + ui.item.value + ' aka ' + ui.item.id;            if (prev_text != this.value)               $(this).val( prev_text  );            $log.append(message);        },        select: function(event, ui) {            $text_was.text(ui.item.value);            $(this).blur();        }    }).blur(function(){      if( this.value == '' )     $(this).autocomplete('search', json_source[0].value );    return false;  });});​

If you simply want to autofill this is the code I am using.

$("#regions").autocomplete({        source: thesource    }).live('keydown', function (e) {        var keyCode = e.keyCode || e.which;        //if TAB or RETURN is pressed set the value of the textbox to the text of the first suggestion        if ((keyCode == 9 || keyCode == 13) && $(".ui-autocomplete").is(":visible")) {            $(this).val($(".ui-autocomplete li:visible:first").text());        }    });