3

我正在使用jQuery Autocomplete小部件，并且受这个问题的启发，为了防止在 select 后关闭菜单，我想出了以下代码：

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

我该如何解决？

4

1 回答 1

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

于 2012-11-24T18:37:15.080 回答