Jquery在jquery ui自动完成上捕获点击事件答案

【问题标题】：Jquery catching click event on jquery ui autocompleteJquery在jquery ui自动完成上捕获点击事件
【发布时间】：2013-10-26 18:03:11
【问题描述】：

我最近一直在尝试解决这个问题，但我做不到

问题是我有一个input 987654323 text我需要在选择自动完成的值时获取当前输入数据。 注意我正在使用 jQuery UI 自动完成功能。

我可以捕捉到keyup 事件，但是当用户点击自动完成值时。 jQuery 不会触发 change 事件处理程序，我尝试使用每个事件处理程序但无济于事。

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

【问题讨论】：

标签： javascript autocomplete jquery jquery-autocomplete

【解决方案1】：

喜欢这个 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!");
    }
});

【讨论】：

嗯，速度很快，但应该阅读手册，无论如何感谢这是我需要的。

【解决方案2】：

Chrome 在为单击更改保留 ui 时遇到问题，因此我为自动完成打开事件中的各个弹出列表锚标记添加了 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');
    }

【讨论】：