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

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