选择后如何防止关闭菜单？

我正在使用jQuery自动完成小部件，并且受到这个问题的启发，为了防止选择后关闭菜单 ，我想出了这个代码：

$(#input_field).autocomplete({ select : function(event, ui) { // I also tried to run 'ui.item.data( "item.autocomplete" );' and it happens // the same thing (keep reading for more information). ui.item.option.selected = false; }, ... }); 

它的工作原理：选择后菜单没有关闭。 但是，我收到以下错误（在Firebug控制台中）：

 TypeError: ui.item.option is undefined 

即使使用option.selected = false我TypeError: option is undefined得到TypeError: option is undefined但它按预期工作。

我怎么解决这个问题？

Answer 1

不幸的是，当前的jQuery UI中没有选项/方法来处理这个问题。 您尝试使用的方法是旧版本的jQuery UI。 在当前版本中， ui.item没有您尝试访问的比例。 它里面只有{"label":"Java","value":"java"} ，所以这就是你有错误的原因。

所以要使它工作，你需要某种黑客。 通过检查jQuery UI源代码，我发现最简单，最可靠的方法是使用自定义方法覆盖public close方法。 如果您永远不需要关闭自动完成function，这很容易做到：

 $("#input_field").data('autocomplete').close = function() {}; 

但是如果你想要仅在用鼠标选择项目时阻止关闭它会更复杂：

 // custom close method (function(){ var instance = $("#input_field").data('autocomplete'); var origClose = instance.close, mouseFlag; // capture mouse events instance.menu.element.on('mousedown', function() { mouseFlag = true; }); instance.close = function(e) { if(!mouseFlag) { // call original method if drop isn't closed by mouse origClose.apply(this, arguments); } else { // clean flag in setTimeout to avoid async events setTimeout(function(){ mouseFlag = false; },1); } } }());​ 

工作JSFiddle