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

Question

我想知道在JQuery自动完成中，当选项打开时，如果我点击选项框外部或按键盘上的ESC键，是否有一种方法可以关闭而不必选择一个选项。 有人知道正确的做法吗？ 我认为可以使用某些方法来检查是否聚焦于自动完成，如果没有，则关闭它，但这只是一个想法。谢谢。

- Ricardo Rodrigues

---

这不是默认操作吗？你能否重新表达一下你的问题，因为很难理解你想要什么？ - William Niu

如果你使用火狐浏览器，那么就不会有这个问题。请使用火狐浏览器，并测试这个例子http://jsfiddle.net/3Yz9f/，输入一个“s”，然后点击“关闭”。如果按下“ESC”键，仍然有相同的选项。 - Ricardo Rodrigues

现在我知道你的意思了，但是你的问题中没有提到对话框（除了标签之外...）。请看下面我的回答。 - William Niu

由于问题更多地是捕获自动完成之外的事件，如果是这样...关闭自动完成。 - Ricardo Rodrigues

Answer 1

当对话框关闭时，只需关闭自动完成即可：

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

看一下实际效果：http://jsfiddle.net/william/3Yz9f/1/。

---

更新

这取决于您所说的“通用”是什么意思。JavaScript非常注重事件。因此，最初，您希望自动完成在对话框关闭时关闭，因此这是答案的第一部分。当然，您可以将其绑定到某些间接事件，例如自动完成模糊或隐藏（您可能需要为隐藏创建自定义事件），但这会使您面临一些风险，因为它们是间接的。

现在，您希望在拖动对话框时关闭它；好吧，这也不难；您可以使用对话框的dragStart事件来实现这一点，但它们是两个不同的事件，都在对话框上，而不是自动完成。我没有看到任何关于自动完成小部件的间接事件，当对话框被拖动时。

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

- William Niu

---

这是一个不错的解决方案并且有效。我正在寻找一个更通用的方法，不需要在对话框中定义关闭，而是使用自动完成功能。 - Ricardo Rodrigues

因为解决了其中一个问题，例如如果您拖动对话框，它不会关闭。 - Ricardo Rodrigues

那是我已经想到的解决方案，但谢谢...暂时没有看到更好的方法（不使用dragstart和close函数）。但还是谢谢。 - Ricardo Rodrigues

嗯...如果您在问题中说明了自己尝试过的内容，那么这将使这个过程更加高效。 - William Niu

我已经完成了在dragStart和关闭对话框时使用的自动完成“close”的功能。谢谢。 - Ricardo Rodrigues

Answer 2

我遇到了同样的问题。你只需要做一件小事情。 在调用“search”方法后，设置焦点。按Esc键或点击框外的区域将关闭下拉菜单。

我正在使用类别子类（http://jqueryui.com/demos/autocomplete/#categories），因此我的代码看起来像：

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

我期望它在.autocomplete小部件上也能够运作相同。

- Sentient

---

阅读了被接受的答案后，我发现这个问题的标题措辞不当。对于我遇到的更一般的问题，与对话框无关，这是我需要的额外步骤。干杯。 - Citrus

我试图解决的问题的确切解决方案！ - Drew