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

我有一个输入。我使用Jquery UI自动完成向用户提出建议。让我在我的列表中有3个项目的图像：item1，item2，item3。我正在寻找的是当用户输入时要关闭的列表。例如，如果用户只输入“it”，则将显示全部3个元素。在那种情况下，如果他输入，我希望列表被关闭。我无法为此提供解决方案。希望有人能帮忙。干杯。马克。JQuery UI自动完成 - 在hiting后隐藏列表输入

http://jsfiddle.net/vXMDR/

我的HTML：

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

我的JS：

$(function() { 

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

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

来源

2012-03-07 Marc

$(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/

来源

2012-03-07 13:32:58 karim79

在我真实的情况下，我已经有一个keyup事件可以过滤我的页面上的表格。我想这个解决方案是相互矛盾的......父母的电子邮件是什么？ – Marc 2012-03-07 13:48:05

嗯，我不知道为什么你会隐藏该项目，而不是只调用明确的'close'方法 - http://docs.jquery.com/UI/Autocomplete#method-close – shanabus 2012-03-07 14:02:21

OHHHHH！我知道了！ e是关键代码... 13是输入键的代码...我的理解是否正确？ – Marc 2012-03-07 14:04:59

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

如果您有任何疑问，请告知我。

神奇的是结合自动完成靠近方法按键

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

UPDATE

$("#search").keypress(function(e){结合＃搜寻元素中指定的功能的按键，传入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

来源

2012-03-07 13:34:25 shanabus

当然@Marc。我将更新与评论 – shanabus 2012-03-07 14:09:15

答案不需要我得到它。非常感谢您的帮助.... – Marc 2012-03-07 14:10:44

好的，但要注意接受的答案，'hide（）'元素与关闭自动填充功能的方式不同。 – shanabus 2012-03-07 14:16:51

我已修改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; 
     } 
    });

我相信这样做可能更优雅，但是这确实解决了下拉菜单稍后可能出现的问题。

来源

2013-09-22 19:09:21

-1

我遇到了这个问题，无法使用close（）方法，因为我的自动完成是在每次加载Backbone视图时重新呈现的。因此，一个新的自动完成元素被附加到DOM，即使附加的输入元素被吹走并被重新创建，这些元素也会被卡住。多余的自动完成功能元素都造成了一些问题，但最糟糕的是，当按下用户输入的速度不够快，我会去通过这个序列：

用户类型的文本
请给建议，开始执行
的按键事件被触发并且执行全文搜索（用户没有从自动完成中选择某些东西）
视图重新加载，输入字段和其他元素被重新呈现，并且新的自动完成元素被附加到DOM的末尾
ori对建议的金索取请求返回并显示响应。

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

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

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

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

来源

2013-09-25 15:28:32 Sean

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

回答

相关问题