JQuery UI自动完成 – 在提示输入后隐藏列表
我有一个输入。 我使用Jquery UI自动完成function向用户提出建议。 让我的列表中的图像有3个项目：item1，item2，item3。 我要找的是当用户点击进入时要关闭的列表。 例如，如果用户只输入“it”，则将显示所有3个元素。 在那种情况下，如果他点击进入，我希望该列表被关闭。 我无法为此解决问题。 希望有人能提供帮助。 干杯。 渣。
http://jsfiddle.net/vXMDR/
我的HTML：
我的js：
$(function() { var availableTags = [ "item1","item2","item3" ]; $("#search").autocomplete({ source:availableTags, minLength: 0 }); });
$(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/3/
如果您有疑问，请告诉我。
神奇的是将自动完成关闭方法绑定到按键
$("#search").keypress(function(e){ if (!e) e = window.event; if (e.keyCode == '13'){ $('#search').autocomplete('close'); return false; } });
UPDATE
$("#search").keypress(function(e){将#search元素的keypress绑定到指定的函数，传入event对象。你也可以把它写成$("#search").on('keypress', function(e) {...
if (!e) e = window.event; 确保如果未传入有效事件，则将e设置为当前window.event对象。
最后， if (e.keyCode == '13'){测试事件键码值等于’enter’键。 有关有效密钥代码的列表， 请参见此处 。
以下是自动完成关闭方法的文档 – http://docs.jquery.com/UI/Autocomplete#method-close
我进一步修改了shanabus解决方案，以允许由于回调而导致的时间延迟。
这是一个简单的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; } });
我确信可以更优雅地做到这一点，但这确实解决了下拉可能会在以后出现的问题。
我遇到了这个问题并且无法使用close（）方法，因为我的自动完成function正在每次加载Backbone视图时重新呈现。 因此，一个新的自动完成元素被附加到DOM上，即使附加的输入元素被吹走并重新创建，它们仍然存在。 多余的自动完成元素导致了一些问题，但最糟糕的是当用户按下足够快的输入时，我会经历以下顺序：
- 用户键入文本
- 建议请求开始执行
- 按键事件被触发并执行全文搜索（用户未从自动完成中选择某些内容）
- 视图重新加载，输入字段和其他元素被重新渲染，并且新的自动完成元素被附加到DOM的末尾
- 原始建议请求将返回响应并显示建议。
请注意，步骤5中显示的建议现在绑定到不再与我的输入字段关联的自动完成容器，因此任何事件（如按esc或单击屏幕上的其他位置）都不会执行任何操作。 这些建议一直存在，直到页面完全重新加载为止。
我最后通过存储最近创建的自动完成元素的mainContainerId并手动删除它来修复此问题。
// during rendering self.currentAutoComplete = $("#input-element").autocomplete({ // set options }); // later if (this.currentAutoComplete) { $("#" + this.currentAutoComplete.mainContainerId).remove(); }