Jquery UI自动完成组合框按钮点击事件 [英] Jquery UI autocomplete combobox button click event

问题描述

我在使用 jquery ui自动完成功能创建组合框时遇到了奇怪的行为。每当我点击滚动条滚动结果列表，然后单击我的组合框按钮关闭结果列表关闭，然后再次打开。

1. 打开jsfiddle演示


2. 在自动填充中输入i


3. 点击下拉按钮
点击垂直滚动以滚动结果

脚本创建按钮

  .button = $（< button type ='button'>& nbsp;< / button>）
 .attr（{tabIndex：-1，title： }）
 .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（）{
 
 //当我把断点放在这里，我的焦点不在输入，
 //那么如果steatment是false？ 
 
 if（input.autocomplete（widget）。is（：visible））{
 input.autocomplete（close）; 
 return; 
} 
 
 //解决一个错误（可能与＃5265相同）
 $（this）.blur（）; 
 
 //将空字符串作为值进行搜索，显示所有结果
 input.autocomplete（search，）; 
 input.focus（）; 
}）; 
  

CSS（强制滚动结果菜单） b
$ b

  .ui-autocomplete {
 max-height：100px; 
 overflow-y：auto; 
 / *防止水平滚动条* / 
 overflow-x：hidden; 
 / *添加填充以考虑垂直滚动条* / 
 padding-right：20px; 
} 
 / * IE 6不支持max-height 
 *我们使用height，但是这强制菜单总是这么高
 * / 
 * 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，显示所有项目）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（）; 
}）; 
  

I'm experiencing weird behavior with jquery ui autocomplete when using it to create a combobox. Whenever I click on the scrollbar to scroll through the list of results AND then click on my combobox button to close the results the results list closes and then opens again. I expect it to close the menu.

Steps to Repro

1. open jsfiddle demo
2. Type 'i' in the autocomplete OR hit the dropdown button.
3. Click on the vertical scroll to scroll the results
4. Click on the dropdown button

Script to Create Button

 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 (force long results menu to scroll)

.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;
}

My solution could be closing the widget even if focus is transferred to widget itself and not the input element?

Any ideas how to modify this code so it behaves this way?

解决方案

Based on issues with the various click and mouse events for the automplete widget, I came up with this: 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();
});​

这篇关于Jquery UI自动完成组合框按钮点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！