Cancel dropdown when field has lost focus

[micschk]

If the ajax request takes a little while, the field may have lost focus by the time it returns. In such cases it doesn't make sense anymore to show the autocomplete dropdown for that field, which could be prevented by checking if the fields still has focus first. Currently the dropdown will show anyway, and also stay open because the blur event has already fired before the dropdown was shown.

[xcash]

Nice catch. This might be based on a config option.

[antrax13]

Any workaround this? I have exactly same issue where I load data via ajax and if I will tab quickly ajax is not fully completed before I move to next input therefor autocomplete list remains open

It can be replicated on demo page too: https://raw.githack.com/xcash/bootstrap-autocomplete/master/dist/latest/index.html show dropdown programatically just tab quickly through this field

[micschk]

@antrax13 I think my workaround was to check for (lost) focus via the events.searchPre & events.searchPost callback options as follows;

$('.selector')
    // Prevent triggering autocomplete on tab-keyup: keep track of last keyup event's keycode
    .on('keyup', function (e){ $(this).data('lastkeyupcode', e.which); })
    .autoComplete({
        events: {
            searchPre: function (txt, el) {
                // cancel if last keyup-ed key was tab (9)
                return $(el).data('lastkeyupcode') === 9 ? false : txt;
            },
            searchPost: function(results, el) {
                // cancel if we've lost focus by now...
                return $(el).is(":focus") ? results : false;
            }
        }
    });

Edit: added extra line of code for keeping track of the last keyup event's keycode.