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

我正在使用jQuery 自动完成 http://api.jqueryui.com/autocomplete小部件，灵感来自这个问题 https://stackoverflow.com/questions/6043506/jquery-ui-autocomplete-disable-select-close-events为了防止选择后关闭菜单，我想出了这段代码：

$(#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 I get TypeError: option is undefined但它按预期工作。

我该如何解决这个问题？

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

因此，要使其正常工作，您需要某种技巧。通过检查 jQuery UI 源代码，我发现最简单、最可靠的方法是覆盖 publicclose没有自定义方法的方法。如果您不需要关闭自动完成功能，这真的很容易：

$("#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);
        }
    }
}());​

Working JSFiddle http://jsfiddle.net/6hcVE/