Question

我正在使用jQuery Autocomplete小部件，并且受到this question的启发，为了阻止在选择后关闭菜单，我想出了这段代码：

$(#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，但它会按预期工作。

我该如何解决？

Answer 1

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

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

$("#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

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

1 个答案: