Jquery捕获Jquery UI自动完成组件的点击事件

Question

我最近一直在尝试解决这个问题，但是我无法解决。

问题在于，我有一个type为text的输入字段，需要在从自动完成中选择值时获取当前的输入数据。注意：我正在使用jQuery UI自动完成。

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

我认为它无法捕获基于DOM的元素操作？我不确定。这里是一个示例。

- tomexsans

Answer 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!");
    }
});

- Tats_innit

---

好快啊，不过应该先看看手册，无论如何感谢你，这正是我需要的。 - tomexsans

Answer 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');
    } 

- CZahrobsky