JQuery UI 自动完成 - 按回车后隐藏列表答案

【问题标题】：JQuery UI autocomplete - Hide list after hiting enterJQuery UI 自动完成 - 按回车后隐藏列表
【发布时间】：2012-03-07 13:28:45
【问题描述】：

我有意见。我使用 Jquery UI 自动完成向用户提出建议。让我在我的列表中有 3 项图像：item1、item2、item3。我正在寻找的是当用户点击进入时要关闭的列表。例如，如果用户只输入“it”，则将显示所有 3 个元素。在这种情况下，如果他按 Enter，我希望关闭列表。我无法为此想出解决方案。希望有人可以提供帮助。干杯。马克。

http://jsfiddle.net/vXMDR/

我的html：

<input id="search" type="input" />

我的js：

$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
        });
});

【问题讨论】：

标签： jquery jquery-ui-autocomplete

【解决方案1】：

这里是解决方案：http://jsfiddle.net/vXMDR/3/

如果您有任何问题，请告诉我。

神奇的是将自动完成关闭方法绑定到按键

 $("#search").keypress(function(e){ 
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
      return false;
    }
  });

更新

$("#search").keypress(function(e){ 将#search 元素的按键绑定到指定的函数，传入event 对象。你也可以写成$("#search").on('keypress', function(e) {...

if (!e) e = window.event; 确保如果没有传入有效事件，它会将e 设置为当前的 window.event 对象。

最后，if (e.keyCode == '13'){ 测试事件键码值是否等于“输入”键。如需有效键码列表，请see here。

这里是自动完成关闭方法的文档 - http://docs.jquery.com/UI/Autocomplete#method-close

【讨论】：

好的，但要小心接受的答案，hide() 元素与关闭自动完成功能的方式不同或记录在案。
注意，如果是在要提交的表单中，最好用这个作为表单提交事件的回调。 $('#search').autocomplete({foo: bar}).closest('form').submit(function () { $('#search').autocomplete('close'); })
像 karim79 的解决方案一样，如果您在加载列表之前按 Enter 键，这将不起作用。例如，如果使用 google maps API 可能需要 2 秒来加载列表。输入“New York”并直接回车，隐藏后会加载列表。

【解决方案2】：

$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
    }).keyup(function (e) {
        if(e.which === 13) {
            $(".ui-menu-item").hide();
        }            
    });
});

http://jsfiddle.net/vXMDR/2/

【讨论】：

在我的真实案例中，我已经有一个 keyup 事件来过滤我页面上的表格。我猜那个解决方案会相互矛盾......括号中的 e 是什么？
嗯，我不知道你为什么要隐藏该项目而不是仅仅调用显式的 close 方法 - docs.jquery.com/UI/Autocomplete#method-close
OHHHHH！我知道了！ e 是键码... 13 是回车键的码... 我的理解正确吗？
是的，完全正确。很抱歉没有尽快回复。根据@shanabus 的回答，我个人更喜欢使用close 方法。
请注意，此代码只会隐藏自动完成列表中的项目，但不会隐藏列表本身。请参阅@shanabus 以获得更好的方法。

【解决方案3】：

我已经进一步修改了 shanabus 解决方案，以允许由于回调导致的时间延迟。

http://jsfiddle.net/vXMDR/46/

这是一个简单的技巧，用于存储是否将自动完成显示为布尔值。（我正在使用 setTimeOut 创建有等待的场景，这是问题场景而不是解决方案。）

shouldComplete = true;

$("#search").autocomplete({
    source:function (request, response) {            
        setTimeout(
            function() {
                response(shouldComplete ? availableTags : null);
            },
            2000);
    }        
    ,
    minLength: 0
    });

然后，当按下回车按钮时，标志设置为 false。任何其他键都会重新激活标志。

$("#search").keypress(function(e){
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
        shouldComplete = false;
      return false;
    }
        else
        {
            shouldComplete = true;
        }
  });

我确信可以更优雅地执行此操作，但这确实解决了下拉菜单可能稍后出现的问题。

【讨论】：

【解决方案4】：

我遇到了这个问题并且无法使用 close() 方法，因为我的自动完成功能在每次加载 Backbone 视图时都会重新渲染。因此，一个新的自动完成元素被附加到 DOM 中，即使附加的输入元素被吹走并重新创建，这些元素仍然存在。多余的自动完成元素导致了一些问题，但最糟糕的是当用户足够快地按下回车时，我会按照以下顺序进行：

用户输入文本
开始执行建议请求
keypress 事件被触发并执行全文搜索（用户没有从自动完成中选择内容）
重新加载视图，重新渲染输入字段和其他元素，并将新的自动完成元素附加到 DOM 的末尾
原始的建议请求会返回一个响应并显示建议。

请注意，第 5 步中显示的建议现在与一个不再与我的输入字段关联的自动完成容器相关联，因此任何事件（例如按 esc 或单击屏幕上的其他位置）都不会执行任何操作。建议会一直停留在那里，直到页面完全重新加载。

我最终通过存储最近创建的自动完成元素的 mainContainerId 并手动删除它来解决此问题。

// during rendering
self.currentAutoComplete = $("#input-element").autocomplete({
  // set options
});

// later
if (this.currentAutoComplete) {
  $("#" + this.currentAutoComplete.mainContainerId).remove();
}

【讨论】：