Jquery在jquery ui autocomplete上捕获click事件

时间:2013-10-18 02:06:17

标签: javascript autocomplete jquery jquery-autocomplete

我一直试图弄清楚这一点,但我不能

问题是我有一个类型为input的{​​{1}}字段,我需要在选择自动填充的值时获取当前输入数据。 注意我正在使用jQuery UI自动完成。

我可以捕获text事件,但是当用户使用自动填充值的点击时。 jQuery不会触发keyup事件处理程序,我尝试使用每个事件处理程序,但无济于事。

我认为它无法捕获基于DOM的元素操作?我不确定。这里有一个 fiddle

2 个答案:

答案 0 :(得分:32)

喜欢这个 http://jsfiddle.net/PUpRr/

select选项可以解决问题。

选项/事件/方法API文档http://api.jqueryui.com/autocomplete/

希望这符合需求:)

示例代码

$("#to").autocomplete({
    source: function (request, response) {

        var friendsArray = [];
        friendsArray = [{
            "id": 1,
            "name": "hulk",
            "value": "hulk"
        }, {
            "id": 2,
            "name": "ironman",
            "value": "ironman"
        }, {
            "id": 3,
            "name": "Foobar",
            "value": "Foobar"
        }];

        response(friendsArray);
        return;


    },

    select: function (e, ui) {

        alert("selected!");
    },

    change: function (e, ui) {

        alert("changed!");
    }
});

答案 1 :(得分:0)

Chrome 在保留 ui 以进行单击更改时遇到问题,因此我在自动完成 open: 事件中为各个弹出列表锚标记添加了一个 mousedown 处理程序。这也是为列表设置样式的好地方:

    function onItemTypeAheadListOpen(e, ui) {
       // Stub for list click issues
       $('.ui-autocomplete a').mousedown(function () {
         lastItemClicked = this.innerText;
       });
       // Override default list style
       $('.ui-autocomplete').css('z-index', '600');
       $('.ui-autocomplete').css('width', '480px');
    }