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

我正在使用这个小部件，受其启发，为了防止在选择后关闭菜单，我产生了以下代码：

$(#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控制台中）：

即使使用

option.selected=false

我也会得到

TypeError:option未定义

，但它可以按预期工作

---

如何解决这个问题？

不幸的是，当前jQuery UI中没有处理这个问题的选项/方法。 您尝试使用的方法适用于较旧版本的jQuery UI。在当前版本的

ui中，项
没有您试图访问的比例。它的内部只有
{“label”：“Java”，“value”：“Java”}
，因此您会出现错误

所以，要想让它发挥作用，你需要一些技巧。通过检查jQueryUI源代码，我发现实现这一点最简单、最可靠的方法是使用out自定义方法重写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);
        }
    }
}());​

工作
您可以提供一个测试用例吗？尝试在
选择
回调函数中添加
console.log（ui）
，并检查您的控制台，查看
ui
参数中到底传递了什么。@Bogdan-记录
ui
对象，它将显示
{label=“the label”，value=“the value”}
。应该是这样的。您使用的是最新的jQuery版本吗？根据下面的说明，
select
事件应该将
ui.item
传递给事件处理函数。是否有方法在
select
事件后重新打开jQuery自动完成菜单以避免黑客攻击？我为此打开了一个。不，没有公共方法。它是通过私有的
\u suggest
方法打开的。您应该编写自定义的自动完成小部件，或者使用我上面提供的一些技巧。您正在询问不同的问题。这个问题是关于如何防止从隐藏中删除，而新问题是关于打开菜单。这个解决方案怎么样：？不知道它在多个UI Datepicker实例上的行为。为什么要引入Datepicker（以及相关问题）？自动完成是否与该小部件相关？
// 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);
        }
    }
}());​