JQuery Autocomplete close option when click outside

Question

I would like to know if there's a way in JQuery Autocomplete, when is open the options if I click OUTSIDE the options box to select or click ESCAPE in the keyboard. It closes, without having to select one option.

Anyone know the correct way to do it? Still thought using something to check if focus the autocomplete , if not to close it but is just an a IDEA.

Thanks

Answer 1

Just close the autocomplete when the dialog is closed:

$("#dialog").dialog({
    close: function() {
        $('#tags').autocomplete('close');
    }
});

See this in action: http://jsfiddle.net/william/3Yz9f/1/.

---

Update

It depends what you mean by being "general". JavaScript is very much event-oriented. So, initially, you want autocomplete to close when dialog is closed, hence the first part of the answer. Sure you can bind it to some indirect events, such as autocomplete blur or hide (you may need to do a custom event for the hide), but that gives you a bit of risk that they might not be triggered, as they're indirect.

Now you want it to close when dialog is dragged; well, that's not hard either; you can achieve this with the dragStart event for dialog, but they're two different events, both on dialogs, not autocomplete. I don't see any indirect event on autocomplete widget itself when dialog is dragged.

If your issue is referring to the autocomplete widget by ID, you could use a context-based selector, e.g. use $('.ui-autocomplete-input', this) rather than $('#tags') in dialog's event handlers.

Answer 2

I ran into the same problem. There is only one little thing you have to do. After calling the 'search' methdod, set the focus. The Esc and clicking outside the box will close the dropdown.

I'm using the category subclass (http://jqueryui.com/demos/autocomplete/#categories) so my code looks like

  $( "#search" ).catcomplete('search');
  $( "#search" ).focus();

I'm expecting it will work the same on the .autocomplete widget as well.