jQuery UI autocomplete select event not working with mouse click

Question

I have a list of links, and I have this search box #reportname. When the user types in the search box, autocomplete will show the text of the links in a list.

Answer 1

This may be a bit farshot, but I had a similar situation where selecting an autocomplete value left the input field empty. The answer was to ignore the "change" events (as those were handled by default) and replace them with binds to "autocompletechange" events. The "change" event gets triggered before the value from autocomplete is in the field => the field had "empty" value when handling the normal "change" event.

// ignore the "change" event for the field
var item = $("#"+id); // JQuery for getting the element
item.bind("autocompletechange", function(event, ui) { [call your handler function here] }

Answer 2

I recently encountered the exact same problem (autocomplete items not clickable, keyboard events working).

Turned out that in my case the answer was not at all JS related. The autocomplete UI was not clickable simply because it was lacking an appropriate value for the z-index CSS property.

.ui-autocomplete {
    z-index: 99999; /* adjust this value */
}

That did the trick.

Answer 3

Had the same issue / problem.

Jquery: 1.11.1 UI: 1.11.0

Question: Do you use bassistance jquery validte plugin simultanously?

If positive: update this to a newest version or just disable it for tests.

I updated from 1.5.5 to 1.13.0

Helped for me. Good luck!