Javascript Jquery UI自动完成组合框按钮单击事件

我和你一起经历了奇怪的行为。每当我单击滚动条滚动浏览结果列表，然后单击我的组合框按钮关闭结果时，结果列表将关闭，然后再次打开。我希望它能关闭菜单

重新编程的步骤

在自动完成中键入“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();
});

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

---

您知道如何修改此代码以使其按此方式运行吗？

问题在于jquery ui autocomplete中有一个解决方法。在某些情况下，有一个mousedown事件设置来关闭菜单。在其中一种情况下，它会检查引发鼠标向下移动的项目是否是autocomplete小部件的一部分。如果没有，则关闭菜单。由于您正在跟踪combobox行为，并且您的按钮不是autocomplete小部件的一部分，因此单击按钮将关闭菜单，因为发生了此事件

您可以从中的第205行开始查看违规情况及其原因。也许值得在jQueryUI论坛上提出这个问题，因为他们的combobox演示也有这个bug

更新

此替换事件基于jquery ui 1.8.18。这一事件已经发生了变化，很可能再次发生变化。如果您选择此路线，则可能需要在每个版本中手动更新此代码

如果是您的组合按钮在创建自动完成（）后通过运行以下命令单击，您可以修补

mousedown

事件，使其不关闭菜单

这将删除当前的mousedown事件，然后添加一个附加检查，以查看触发事件的元素或其父元素（单击按钮或单击按钮内的ui图标）是否具有类

ui组合触发器

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 ui-combo-trigger").click(function(event) {

        // 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();
        event.stopImmediatePropagation();
    });

创建按钮的代码相对不变。我们只需要添加新类

ui组合触发器

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 ui-combo-trigger").click(function(event) {

        // 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();
        event.stopImmediatePropagation();
    });

var-button=$（“”）.attr（“tabIndex”，-1）.attr（“title”，“Show all items”）.insertAfter（input）.button({
图标：{
主要：“ui-icon-triangle-1-s”
},
文本：false
}).removeClass（“ui角点全部”）.addClass（“ui角点右ui按钮图标ui组合触发器”）。单击（函数（事件）{
//当我把断点放在这里，我的注意力不在输入上，
//那么这如果是假的话？？？？
如果（input.autocomplete（“小部件”）为（“：可见”））{
输入。自动完成（“关闭”）；
返回；
}
//解决bug（可能与#5265的原因相同）
$（this.blur（）；
//将空字符串作为要搜索的值传递，显示所有结果
input.autocomplete（“搜索”和“）；
input.focus（）；
事件。stopImmediatePropagation（）；
});

基于AutoComplete小部件的各种点击和鼠标事件的问题，我提出了以下建议：

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();
});​

var输入=$（'#txtComplete'）；
var数据=[]；
var-isOpen=false；
函数_init（）{
对于（var idx=0；idx试试这个。我想它会帮你的

var input = $('#txtComplete');

var data = [];
var openCheck = false;

function _init() {
    for (var idx = 0; idx <= 100; idx++) {
        data.push('item: ' + idx);
    };
    input.autocomplete({
        source: data,
        minLength: 0,
        open: function(event, ui) {
            openCheck = true;
        },
        select: function(event, ui) {
            openCheck = 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) {
        if (openCheck) {
            input.autocomplete("close");
            openCheck = false;
        } else {
            input.autocomplete("search", "");
        }
    });
}

$(function() {
    _init();
    afterInit();
});

var输入=$（'#txtComplete'）；
var数据=[]；
var openCheck=false；
函数_init（）{
对于（var idx=0；idxBrian很好地解释了这个问题。使用jquery ui 11，您可以执行以下操作：

wasOpen = false;
$button
  .mousedown(function() {
     wasOpen = input.autocomplete( "widget" ).is( ":visible" );
    })
   .click(function() {
       input.focus();

        // Close if already visible
        if ( wasOpen ) {
          return;
        }

请参见
中的示例，您是否可以提供HTML，也许是JSFIDLE？这样会更容易获得。我不明白您在这里试图实现什么。您实际上想解决什么问题？我的问题是，当我单击按钮小部件出现时，我单击小部件，然后再次单击按钮，我的小部件会重新创建，而不是关闭，我想让我的下拉小部件在toggle matter中打开和关闭！@lakshmipriya-是的。工作正常。不能再使用箭头键浏览列表了。@j08691非常感谢这太棒了。不能再使用箭头键浏览列表了。
wasOpen = false;
$button
  .mousedown(function() {
     wasOpen = input.autocomplete( "widget" ).is( ":visible" );
    })
   .click(function() {
       input.focus();

        // Close if already visible
        if ( wasOpen ) {
          return;
        }