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

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 源代码，我发现最简单和最可靠的方法是用自定义方法覆盖公共(public) 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