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

Tats_innit · Accepted Answer · 2013-10-18 02:09:28Z

44

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

answered Oct 18, 2013 at 2:09

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tomexsans Over a year ago

well that was fast, should have read the manual though, any way thanks this is what i need.

CZahrobsky · Accepted Answer · 2021-01-12 23:14:03Z

-1

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

answered Jan 12, 2021 at 23:14

CZahrobsky

8189 silver badges7 bronze badges

Collectives™ on Stack Overflow

Jquery catching click event on jquery ui autocomplete

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related