Add autoFill capabilities to jQuery-UI 1.8.1

here's what I currently have, unfortunately I cannot seem to figure out how to get autoFill to work with jQuery-UI... It used to work with the straight up Autocomplete.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">


    var thesource = "RegionsAutoComplete.axd?PID=3"
    $(function () {
        function log(message) {
            $("<div/>").text(message).prependTo("#log");
            $("#log").attr("scrollTop", 0);
        }

        $.expr[':'].textEquals = function (a, i, m) {
            return $(a).text().match("^" + m[3] + "$");
        };

        $("#regions").autocomplete({
            source: thesource,
            change: function (event, ui) {
                //if the value of the textbox does not match a suggestion, clear its value
                if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
                    $(this).val('');
                }
                else {
                    //THIS IS CURRENTLY NOT "LOGGING" THE "UI" DATA
                    //IF THE USER DOES NOT EXPLICITLY SELECT
                    //THE SUGGESTED TEXT
                    //PLEASE HELP!!!
                    log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
                }
            }
        }).live('keydown', function (e) {
            var keyCode = e.keyCode || e.which;
            //if TAB or RETURN is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion
            if ((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {
                $(this).val($(".ui-autocomplete li:visible:first").text());
            }
        });
    });


</script>

My JSON in the back end looks like this

[
    { "label": "Canada", "value": "Canada", "id": "1" },
    { "label": "开发者_如何学PythonUnited States", "value": "United States", "id": "2" },
]

I've used the answer here to get the mustMatch working, but unfortunately if I "tab" away from the input box or if I type the word completely rather than actually selecting the suggested text, I get the "Nothing selected" response instead of an Value and ID.

Does anyone know how to extract the id out of the autocomplete when you don't actually select the field?

Basically, What I'm looking for is something similar to the Month (local): example found HERE: http://jquery.bassistance.de/autocomplete/demo/

But obviously using the jQuery-UI instead of the jquery.autocomplete.js

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