Question

我有一个输入。我使用Jquery UI自动完成功能向用户提出建议。让我的列表中的图像有3项：item1，item2，item3。我要找的是当用户点击进入时要关闭的列表。例如，如果用户只输入“it”，则将显示所有3个元素。在那种情况下，如果他点击进入，我希望该列表被关闭。我无法为此解决问题。希望有人能提供帮助。干杯。马克。

http://jsfiddle.net/vXMDR/

我的HTML：

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

我的js：

$(function() {

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

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

Answer 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'){测试事件键码值等于'enter'键。有关有效密钥代码的列表，see here。

以下是自动填充关闭方法的文档 - http://docs.jquery.com/UI/Autocomplete#method-close

Answer 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/

Answer 3

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

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

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

shouldComplete = true;

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

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

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

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

Answer 4

我遇到了这个问题并且无法使用close（）方法，因为我的自动完成功能正在每次加载Backbone视图时重新呈现。因此，一个新的自动完成元素被附加到DOM，即使附加的输入元素被吹走并重新创建，它们仍然存在。多余的自动完成元素导致了一些问题，但最糟糕的是当用户按下快速输入时，我会按照这个顺序进行：

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

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

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

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

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

JQuery UI自动完成 - 在输入后隐藏列表

4 个答案: