单击外部时 JQuery 自动完成关闭选项

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7401616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 23:47:52  来源:igfitidea点击:

JQuery Autocomplete close option when click outside

jqueryjquery-uiautocompletedialogjquery-ui-autocomplete

提问by Ricardo Rodrigues

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.

我想知道在 JQuery 自动完成中是否有办法,如果我单击选项框外部以选择或单击键盘中的 ESCAPE,则何时打开选项。它会关闭,而无需选择一个选项。

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

谢谢

回答by William Niu

Just closethe autocomplete when the dialog is closed:

关闭对话框时只需关闭自动完成:

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

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

看看这个: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.

这取决于你所说的“一般”是什么意思。JavaScript 是非常面向事件的。因此,最初,您希望在关闭对话框时关闭自动完成功能,因此是答案的第一部分。当然您可以将它绑定到一些间接事件,例如自动完成模糊或隐藏(您可能需要为隐藏执行自定义事件),但这会给您带来一些风险,它们可能不会被触发,因为它们是间接的.

Now you want it to close when dialog is dragged; well, that's not hard either; you can achieve this with the dragStartevent 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.

现在您希望它在拖动对话框时关闭;嗯,这也不难;您可以使用dragStart对话框事件来实现这一点,但它们是两个不同的事件,都在对话框上,而不是自动完成。拖动对话框时,我在自动完成小部件本身上看不到任何间接事件。

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.

如果您的问题是通过 ID 引用自动完成小部件,您可以使用基于上下文的选择器,例如使用$('.ui-autocomplete-input', this)而不是$('#tags')在对话框的事件处理程序中。

回答by Sentient

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.

我遇到了同样的问题。你只需要做一件小事。调用“搜索”方法后,设置焦点。Esc 并在框外单击将关闭下拉列表。

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

我正在使用类别子类(http://jqueryui.com/demos/autocomplete/#categories)所以我的代码看起来像

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

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

我希望它在 .autocomplete 小部件上也能正常工作。