JQuery UI自动完成-点击回车后隐藏列表

我有意见。我使用jQueryUIAutoComplete向用户提出建议。让我的列表中有3个项目：项目1、项目2、项目3。我所寻找的是当用户点击enter时关闭的列表。例如，如果用户只输入它，所有3个元素都将显示。在这种情况下，如果他点击回车键，我希望列表关闭。我没能想出解决这个问题的办法。希望有人能帮忙。干杯马克

我的html：

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

以下是解决方案：

如果你有问题，请告诉我

神奇之处在于将自动完成关闭方法绑定到按键

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

更新

$search.keypressfunctione{将搜索元素的keypress绑定到指定的函数，并传入事件对象。您也可以将其写入$search。在'keypress'上，functione{

if！e=window.event；确保在未传入有效事件的情况下，将e设置为当前window.event对象

最后，如果e.keyCode=='13'{测试事件keyCode值是否等于'enter'键

---

以下是自动完成关闭方法的文档-

我进一步修改了shanabus解决方案，以考虑回调引起的时间延迟

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

shouldComplete = true;

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

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

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

---

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

我遇到了此问题，无法使用close方法，因为在主干视图的每次加载中都会重新呈现我的autocomplete。因此，在DOM和其他视图中都会附加一个新的autocomplete元素即使附加的输入元素被吹走并重新创建，仍会被卡住。多余的自动完成元素会导致一些问题，但最糟糕的是，当用户足够快地按enter键时，我会经历以下顺序：

用户类型文本 征求意见开始执行 当用户未从“自动完成”中选择内容时，将触发按键事件并执行全文搜索 重新加载视图，重新呈现输入字段和其他元素，并在DOM末尾追加一个新的自动完成元素 原始建议请求将返回一个响应，并显示建议。 请注意，步骤5中显示的建议现在绑定到一个自动完成容器，该容器不再与“我的输入”字段关联，因此任何事件（如按esc键或在屏幕上单击其他位置）都不会起任何作用。这些建议将被固定在那里，直到完全重新加载页面

最后，我通过存储最近创建的autocomplete元素的mainContainerId并手动删除它来解决这个问题

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

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

---

在我的真实场景中，我已经有一个keyup事件来过滤我页面上的一个表。这个解决方案可能会有冲突，我猜…parenthisis中的e是什么？嗯，我不知道为什么你要隐藏该项而不是只调用显式close方法-ohhhh！我明白了！e是键代码…13是enter键的代码…是我的unde理解正确吗？是的，没错。很抱歉没有尽快回复。我个人更喜欢使用@shanabus答案中的close方法。注意，此代码只会隐藏自动完成列表中的项目，而不会隐藏列表本身。有关更好的方法，请参阅@shanabus。好的，但请注意接受的答案，隐藏元素不是唯一的方法关闭自动完成功能的相同或有文档记录的方法。请注意，如果该功能位于要提交的表单中，最好将其用作表单提交事件的回调。$'search'.autocomplete{foo:bar}.closest'form'.submitfunction{$'search'.autocomplete'close'；}与karim79的解决方案一样，如果在加载列表之前按enter键，则此方法不起作用。例如，如果使用google maps API加载列表可能需要2秒钟。请输入“New York”并立即按enter键，然后在隐藏列表后加载列表。

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

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

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