JqueryUI : close autocomplete widget when last match lost

Question

I'm struggling with an issue on JqueryUI and its autocomplete widget. Whenever it finds at least one match, the widget appears fine. The issue occurs if the user doesn't select one of the proposals and keeps typing. Here is an example:

Auto complete finds matches, everything is fine.

User keeps typing, the searchs results are narrowed, everything is still OK

User keeps typing even more, there is no match left, but the widget remains open.

This is the behaviour I want to get rid of. I'm running JqueryUi version 1.9.2. I read this question and tried using the widget's "response" event, as suggested.

response: function(event, ui) {
    if (ui.content.length === 0) {
        $("#field").autocomplete('close');
    }
}

Unfortunately, this accomplishes nothing in my case, because there is no response event triggered when the last match is lost.

Is there a way to fix this ?

EDIT : It seems that later versions of jQuery UI fix this. Unfortunately, upgrading to versions 1.10+ implies a LOT of changes, and this library is used like everywhere in my project. That sounds like an extremly huge time investment to fix a minor annoyance. What I'm looking for is a easier workaround.

Where did you see that it has been fixed since 1.10+ ? – Brewal Feb 20 '15 at 14:29 — Brewal, Feb 20 '15 at 14:29
Are you sure you have no error in console ? – Brewal Feb 20 '15 at 14:36 — Brewal, Feb 20 '15 at 14:36

score 0 · Answer 1 · answered Feb 20 '15 at 15:26

Brewal directed me towards the solution : there was indeed an error in console, about "length" property not available for "undefined". I thought it was related to my addition to the code, but it was actually already there, well hidden. map() uses the length property in the background, it simply couldn't map en empty result set.

I changed this :

success: function(data) {
   response($.map(data.fieldList, function() {
        // some treatment
    }));
}

into this :

success: function(data) {
    if (data.fieldList !== undefined) {
        response($.map(data.fieldList, function() {
            // some treatment
        }));
    } else {
        $("#field").autocomplete("close");
    }
}

And that did the job.

JqueryUI : close autocomplete widget when last match lost

1 Answers1