如何prevent后选择关闭菜单？ [英] How to prevent closing the menu after a select?

问题描述

我使用的是 jQuery的自动完成功能部件，并通过<一个启发href=\"http://stackoverflow.com/questions/6043506/jquery-ui-autocomplete-disable-select-close-events\">this以问题的 prevent关闭菜单中选择的，我想出了这个code后：

I am using the jQuery Autocomplete widget and, inspired by this question in order to prevent closing the menu after select, I came up with this code:

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

It works: the menu is not closed after select. However, I get the following error (in the Firebug console):

TypeError: ui.item.option is undefined

甚至可以通过使用 option.selected = FALSE 我得到类型错误：选项未定义，但它工作正常。

Even by using option.selected = false I get TypeError: option is undefined but it works as expected.

我该如何解决呢？

推荐答案

不幸的是当前jQuery UI的任何选项/方法来处理这​​个问题。
你想使用的方法是对旧版本的jQuery用户界面的。在目前的版本 ui.item 没有你试图访问proporties。它只有 {标签：Java的值：Java的} 里面，所以这就是为什么你有一个错误

Unfortunately there's no option/method in current jQuery UI to handle this issue. The method you trying to use is for older versions of jQuery UI. In current version ui.item doesn't have proporties you trying to access. It only has {"label":"Java","value":"java"} inside, so that's why you have an error.

因此​​，为了使它的工作原理，你需要某种形式的黑客。通过检查jQuery UI的源$ C ​​$ C我发现，这样做的最简单，最可靠的方法是重写公共关闭法进行自定义的方法。这真的很容易做，如果你永远需要关闭自动完成：

So to make it works you'll need some sort of hack. By inspecting jQuery UI source code I found that the easiest and most reliable way to do this is to override public close method with out custom method. It's really easy to do if you never need to close autocomplete:

$("#input_field").data('autocomplete').close = function() {};

不过，如果你想prevent只有收盘时鼠标选择项目的更复杂：

But it's more complicated if you want to prevent closing only when item is selected with mouse:

// 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

这篇关于如何prevent后选择关闭菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！