javascript - jQuery UI自动完成组合框按钮单击事件

我正在使用jquery ui autocomplete when using it to create a combobox遇到奇怪的行为。每当我单击滚动条以滚动浏览结果列表，然后单击组合框按钮以关闭结果时，结果列表将关闭，然后再次打开。我希望它关闭菜单。

复制步骤

open jsfiddle demo

在自动完成中输入“i”，或点击下拉按钮。

单击垂直滚动以滚动结果

单击下拉按钮

创建按钮的脚本

 this.button = $("<button type='button'>&nbsp;</button>")
    .attr({ "tabIndex": -1, "title": "Show all items" })
    .insertAfter(input)
    .button({
         icons: {
             primary: "ui-icon-triangle-1-s"
         },
         text: false
    })
    .removeClass("ui-corner-all")
    .addClass("ui-corner-right ui-button-icon")
    .click(function () {

        // when i put breakpoint here, and my focus is not on input,
        // then this if steatment is false????

        if (input.autocomplete("widget").is(":visible")) {
            input.autocomplete("close");
            return;
        }

        // work around a bug (likely same cause as #5265)
        $(this).blur();

        // pass empty string as value to search for, displaying all results
        input.autocomplete("search", "");
        input.focus();
});

CSS(强制长结果菜单滚动)

.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
    height: 100px;
}

我的解决方案可能是关闭窗口小部件，即使焦点已转移到窗口小部件本身而不是输入元素上？

有什么想法可以修改此代码，使其表现为这种方式吗？

最佳答案

基于自动完成小部件的各种单击和鼠标事件的问题，我想到了这个: jsFiddle example 。

jQuery的:

var input = $('#txtComplete');

var data = [];
var isOpen = false;

function _init() {
    for (var idx = 0; idx <= 100; idx++) {
        data.push('item: ' + idx);
    };
    input.autocomplete({
        source: data,
        minLength: 0,
        open: function(event, ui) {
            isOpen = true;
        },
        select: function(event, ui) {
            isOpen = false;
        }
    });
}

function afterInit() {
    var button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("title", "Show all items").insertAfter(input).button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    }).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function(event) {
        input.focus();
        if (isOpen) {
            input.autocomplete("close");
            isOpen = false;
        } else {
            input.autocomplete("search", "");
            event.stopImmediatePropagation();
        }
    });
}
$(window).click(function() {
    input.autocomplete("close");
    isOpen = false;
});
$(function() {
    _init();
    afterInit();
});​

关于javascript - jQuery UI自动完成组合框按钮单击事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10227171/