javascript - jqueryui 自动完成保持打开状态,但在单击外部时关闭

标签 javascript jquery jquery-ui onclick jquery-ui-autocomplete

我正在使用 jquery-ui 自动完成。

我希望自动完成搜索的结果列表保持打开状态 当区域超出“自动完成文本输入区域”和“搜索结果列表”时关闭。

我引用了keep ui autocomplete open at all times

现在它保持开放状态。 但不知道如何在单击外部区域时关闭它。

http://jsfiddle.net/9r3avhoe/6/

$("input").autocomplete({
    source: ["Apple", "Boy", "Cat"],
    minLength: 0,
    response: function(event, ui) {
          //console.log(ui);
        },
        select: function(event, ui) {
          addObject(ui.item.value);
          return false;
        },
        focus: function(event, ui) {
          return false;
        },
        close: function(event, ui) {
          if (!$("ul.ui-autocomplete").is(":visible")) {
            $("ul.ui-autocomplete").show();
            $( "#search" ).focus();
          }

        }
});

最佳答案

您可以使用焦点并仅触发小部件事件。

$("input").focusout(function(event) {
    $("ul.ui-autocomplete").hide();
})

关于javascript - jqueryui 自动完成保持打开状态,但在单击外部时关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53002033/

相关文章:

jquery - 如何只允许一个 div 在阅读更多点击时展开

javascript - 父 div 可滚动,子 div 不可滚动?

javascript - Jquery 中 .sortable 函数的问题

javascript - 错误: cannot call methods on tabs prior to initialization; attempted to call method 'destroy'

javascript - 绑定(bind)子输入:value to the parent prop

jquery 可拖动和鼠标悬停

jquery - twitter-bootstrap 和 HighCharts 插件之间的冲突

Javascript 警报在 IE 中提示两次

javascript - css 方形限制大小和位置到父 div

jquery - 可滚动获取元素的当前值