jquery - 选项卡内的 jQuery 自动完成功能 - 搜索后点击离开会创建孤立结果窗口

Question

我在一些选项卡中有一个自动完成文本框。

见这里的例子：http: //jsfiddle.net/fTQ26/3/

尝试以下步骤：

1. 在文本框中输入“A”
2. 之后立即单击其他选项卡之一
3. 等待几秒钟

您应该看到最终得到一个孤立的自动完成结果框。

确保不会发生这种情况的最佳方法是什么？

（如果可能的话，我会很感激一个优雅的解决方案，因为发生这种情况的实际页面非常复杂！）

Answer 1

约翰·科尔纳是正确的。但是您还需要在单击另一个选项卡后关闭自动完成功能。

 $( "#tabs" ).tabs({
     select: function(event, ui) {
         $( "#tags" ).autocomplete('close');
     }
 });

否则，如果您在第一个选项卡中等待自动完成功能打开，然后转到另一个选项卡，自动完成功能仍位于内容之上。

更新小提琴：http: //jsfiddle.net/fTQ26/16/

Answer 2

您可以绑定到 open 事件，如果元素不可见，则关闭自动完成：

open: function (event, ui)
{
    if (!$(this).is(":visible"))
        $(this).autocomplete("close");                
}

更新小提琴：http: //jsfiddle.net/fTQ26/15/