Jquery catching click event on jquery ui autocomplete

Question

i have been trying to figure this out lately but i can't

the problem is that i have an input field with type text that i need to get the current input data when the values from the autocomplete are selected. Note i am using jQuery UI autocomplete.

i can catch the keyup event but when a user uses clicks on the autocomplete values. jQuery does not fire the change event handler, i tried using every event handler there is but to no avail.

i think it cannot catch a DOM based manipulation of an element? i'm not sure. here is a fiddle

Answer 1

Like this http://jsfiddle.net/PUpRr/

select options should do the trick.

Options/events/methods API documentation : http://api.jqueryui.com/autocomplete/

Hope this fits the needs :)

Sample code

$("#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!");
    }
});

Answer 2

Chrome had issues retaining the ui for clicked changes, so I added a mousedown handler for the individual popup list anchor tags in the autocomplete open: event. It's also a good place for styling the list:

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