Help with jQuery UI auto-complete with the ability to delete

Question

I have jQuery code written to enable autocomplete in an input field.

I am having two problems that I cannot fix.

• The tab from the field will not fill the input. I need the FIRST clause to fill in the field if nothing is selected (pressed or selected with up / down) OR for the selected item to be filled in the field. (note: the selection is made with the up / down arrows)
• When using the up / down arrows, I need an input to display "LABEL", not "VALUE". Pressing up / down currently fills the VALUE input.

Any advice is appreciated.

Here is my JSBIN test site.
http://jsbin.com/iyedo3/2

Note. The box <input id="dummy" />is here to give you something on the tab. If it is deleted, the help area expands.

Answer 1

I think I figured it out. Using jQuery Autofill Assistant

$(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 select "Choose 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 that 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>