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

Caryl

Isn't it the default action? Could you rephrase your question, as it is very hard to understand what you are after? – Frow

Well, not really if you use firefox. Go with firefox, and test this example jsfiddle.net/3Yz9f , put an s and then click close. Still options, the same if you press ESC. – Caryl

Now I know what you mean, but you didn't mention a word about dialog in your question (other than the tags....). See my answer below. – Frow

Because the problem is more to catch the event outside autocomplete , and if so ...close autocomplete. – Caryl

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.

Frow

Is a nice solution and works. Was lookin a more general, to not define in dialog box to close , but in autocomplete. – Caryl

Because solves one of the problems, for example if you click drag the dialog , he doesn't close. – Caryl

That is the solution i already thought, but thanks ... not seeing a better way (for now) , without using dragstart and close function. But thanks – Caryl

hum....it would have been nice if you stated in your question what you had tried, so it would make this process more efficient. – Frow

I finished to use on dragStart and close dialog , the autocomplete "close" , will work. Thanks – Caryl

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.

Iolite

When reading the accepted answer I found this question's title to be poorly worded. For the problem I had which was more general and had nothing to do with dialogs this is the extra step I required. Cheers. – Milka

The exact solution to the problem I was trying to solve! – Brittaniebrittany