Blur textbox when an item is selected with mouse or enter key

Question

I'm having problems trying to resolve the issue with the tab key with an autocomplete field.

The idea is that when a user presses the up or down key, and then tabs to make a selection and move to the next field, what happens is that the tab unexpectedly skips to some other (possible) tabindex.

The whole thing is driving me nuts, here is the code:

$(function () {
    var countryTags = ["China", "Colombia", "Cuba"];
    var cityTags = ["China", "Colombia", "Cuba"];
    $("#whatcountry").autocomplete({
        source: function (request, response) {
            var results = $.ui.autocomplete.filter(countryTags, request.term);
            response(results.slice(0, 5));
        },
        select: function (event, ui) {
            $("#whatcity").focus();
        }
    });
    $("#whatcity").autocomplete({
        source: function (request, response) {
            var results = $.ui.autocomplete.filter(cityTags, request.term);
            response(results.slice(0, 5));
        },
        select: function (event, ui) {
            $("#Submitme").focus();
        }
    });
    // Hover states on the static widgets
    $("#dialog-link, #icons li").hover(
        function () {
            $(this).addClass("ui-state-hover");
        },
        function () {
            $(this).removeClass("ui-state-hover");
        });
});

Please see the jsfiddle! which demonstrates the problem.

Any ideas?

Answer 1

jQuery UI autocomplete seems to do a good job with setting focus when tab key is used to select an item. Set a special case to handle selection via enter key or click:

select: function (event, ui) {
    var e = event.originalEvent.originalEvent;
    if (e.which === 1 || e.which === 13) {
        $("#whatever").focus();
    }
}

Demo here
Read the documentation to improve the code