Jquery UI Autocomplete doesn't allow options to be selected with mouse anymore

Question

I recently updated jquery ui and its autocomplete plugin - however in the newer version it won't let me select the options with a mouse click and I have to use the up and down arrows. How do I re-enable selection via mouse click?

Btw the new version is 1.9.1, old version was 1.8.2

Selfconfessed

you can still select via the mouse in UI 1.9.1. Try using the example here: jqueryui.com/autocomplete Can you post some code? – Lasso

Hi Elliott - the demo is working correctly, but on the two pages where I'm using the plugin I can't select with the mouse at all. Must be a conflict somewhere. If I get a chance I'll look into whats causing it and submit as a bug – Selfconfessed

I downgraded to the previous version in the end. – Selfconfessed

Answer 1

In my case the mouse selection capability was disabled by an outdated third party jQuery plugin. This thread gave me an idea of what might be wrong: http://forum.jquery.com/topic/autocomplete-click-to-select-item-not-working-in-1-9-1

I was using an old version of jquery validation plugin (https://github.com/jzaefferer/jquery-validation). I disabled one plugin after another to see which was causing the misbehaviour.

Mohun

Thanks bubblez, that fixed it for me, you've saved me hours :) – Daveen

For me it turned out to be a call to stopPropagation() on a click in body e.g. $("body").click(function (e) {e.stopPropagation()}; look for code like this and comment out stopPropagation(). – Lefthanded

Thanks,That fixed it 👍 – Muezzin

Answer 2

I had the same issue, even using the latest version of jquery-ui available at the time 1.11.4

Checking the source code in file jquery-ui.js I found a piece like this:

"click .ui-menu-item": function( event ) {
                    var target = $( event.target );
                    if ( !this.mouseHandled && target.not( ".ui-state-disabled" ).length ) {
                        this.select( event );

                        // Only set the mouseHandled flag if the event will bubble, see #9469.
                        if ( !event.isPropagationStopped() ) {
                            this.mouseHandled = true;
                        }

The problem is the mouseHandled var set to true. But it only happens if the event propagation hasn't been stopped.

So as the solution I defined my autocomplete like this:

$('.autocomplete').autocomplete({
  source: ['value1','value2','value3','value4'], //my source
  select: function(event, ui){
    event.stopPropagation(); //the select event will work next time you click
    //your logic comes here ...
  }
})

It worked for me, I hope it works for you! =)

Cryptography

Answer 3

The most recent version has fixed this.

Just update to the latest version of jquery.validate.js from http://jqueryvalidation.org/. For example download Microsoft’s Ajax CDN (hotlinking welcome) http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js

Valiancy