jQuery UI Autocomplete autoFocus无需鼠标移开

Question

I've tried to read around on this today, and I can't find an answer here nor via Google. I'm hoping someone can help say "you idiot, this is the way to do it" and I can move on with my life. :)

I have jquery UI autocomplete plugin installed and working fine. I added autoFocus: true and I can now tab out and it will select the first option that was available. However, if I focusout on the input element, the autocomplete does not force a selection by choosing the first option. I have tried many different, horrible, ways to force this to occur, and I have done it, but it lags my system out and crashes the page.

I have jQuery v1.10.2 , jQuery UI Core 1.9.1 , and jquery UI Autocomplete 1.10.4 running with my application now.

Current autocomplete event:

$("#element").autocomplete({
    source: "search.php",
    minLength: 2,
    select: function(event, ui) {
        $('#element').val(ui.item.value);
        getOptions();
    },
    autoFocus: true, 
    html: false, 
    open: function(event, ui) {
        $(".ui-autocomplete").css("z-index", 1000);
    }
});

This works correctly but lags my page out and will crash the browser. There's some form of infinite loop here that I can see but can't seem to understand in order to fix:

$("#element").click(function() {
    $("#element").blur(function() {
        $('.ui-autocomplete .ui-menu-item:first-child').click();
        $("#quantity").focus();
    });
});

Thanks again for any help. I sure hope it's a "DOH! Here's the issue." sort of problem and I just needed a new set of fresh eyes. :)

Answer 1

Welp, I gave it about an hour and only got six views. I was able to get something working. Will it work out in all browsers? Only time and, most likely, many hours of frustration will tell.

$("#element").autocomplete({
    source: "search.php",
    minLength: 2,
    select: function(event, ui) {
        $('#element').val(ui.item.value);
        getOptions();
    },
    autoFocus: true,
    mustMatch: true,
    html: false,
    open: function(event, ui) {
        $(".ui-autocomplete").css("z-index", 1000);
    }
}).blur(function() {
    if($('#element').val() != $('#element').data('selected-item')) {
        if($('.ui-autocomplete').length) {
            $('.ui-autocomplete .ui-menu-item:first-child').click();
            $('#quantity').focus();
        }
    }
});

I used blur to get the event of losing focus on the input field. If the value of the input field doesn't equal the previously selected value, then I check to make sure the ui-autocomplete element exists. If it does, then I force a click event on the first child of the ui-menu-item element, which is the list of results. My concern is with the first-child selector and some cross browser issues, and I believe my first test in IE wasn't that great. But, for Chrome/FF/Safari? It works perfectly!