Help with jQuery UI Autocomplete with ability to TAB away

I've got some jQuery code written to enable autocomplete on an input field.

I'm having two issues with it that I can't seem to fix.

1. Tabbing away from the field will not populate the input. What I need is for either the FIRST suggestion to populate the field if nothing is selected(clicked or selected via up/down) OR for the highlighted item to be populated in the field. (note: highlighting is done via up/down arrows)
2. When using the up/down arrows I need the input to display the "LABEL" and not the "VALUE" Currently pressing up/down will populate the input the the VALUE.

Any advice will be greatly appreciated.

Here is my JSBIN 开发者_StackOverflow中文版testing ground.

http://jsbin.com/iyedo3/2

Note: the <input id="dummy" /> field is just there to give you something to "tab" over to. If it's removed the help area is expanded.

I think I've figured this out. Using the jQuery AutoComplete Helper

$(function () {
    $(label_element).autocomplete({
        source: json_string,
        selectFirst: true,
        focus: function (event, ui) {
            return false;
        },
        select: function (event, ui) {
            $(value_element).val(ui.item.value);
            $(label_element).val(ui.item.label);
            return false;
        }
    });
});

And the following Select First Script

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

Now anywhere I need to add autocomplete, I just use this.

<script type="text/javascript">
        var json_string = // My Autocomplete JSON string.
        var label_element = "#RegionName";
        var value_element = "#RegionID";
</script>