jQueryUI autocomplete 'select' does not work on mouse click but works on key events

Question

JS/JQuery:

$this.find('input').autocomplete({
    source: "/autocomplete_tc_testcasename", 
    minLength: 2,
    focus: function(e,ui){
        $(this).val(ui.item.label);
        return false;
    },   
    select: function(e, ui) {
        console.log("Selected: "+ui.item.value);
    }    
}); 

CSS:

        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            padding: 5px;
        }   
        .ui-menu {
            list-style: none;
            background-color: #FFFFEE;
            width: 50%;
            padding: 0px;
            border-bottom: 1px solid #DDDDDD;
            border-radius: 6px;
            -webkit-box-shadow: 0 8px 6px -6px black;
            -moz-box-shadow: 0 0px 0px -0px black;
            box-shadow: 0px 2px 2px 0px #999999;
        }   
        .ui-menu .ui-menu {
        }
        .ui-menu .ui-menu-item {
            color: #990000;
            font-family:"Verdana";
            font-size: 12px;
            border-top: 3px solid #DDDDDD;
            background-color: #FFFFFF;
            padding: 10px;
        }

Problem Summary:

• AJAX works fine, I get all the entries correctly in the autocomplete menu.
• I am able to use key up/down arrows to select menu items and once I hit return, select event is fired correctly and console message is displayed.
• I can focus on ui-menu-items successfully and capture mouse over events to change value of input text.
• I cannot seem to click on menu item and fire a select event. i.e when I click on a menu item, console message is never displayed.
• It is as if the click event is dismissing the menu and closing it instead of actually firing a select event. Any idea on how to get over this issue?
• I tried "appendTo : $this" instead to input's parent div, and then mouse click works fine! - select event gets fired and console message is displayed successfully. But that is not what I want since the menu is appended within the parent div which distorts the UI since they probably share the same z-index. Even if I change z-index to a higehr number in this case, it didn't quite help. So I'm looking for a solution where I don't 'have' to use appendTo if possible.

I found various other questions quite in the ballpark, but none of these seem to address my question.

jQuery Autocomplete - Left Mouse Click not firing Select event

jQuery UI autocomplete select event not working with mouse click

Thanks!

Astronomy

This is going to be really difficult to recreate and resolve unless you can create an example of your problem on jsfiddle.net or post a link to an external site .... – Caswell

Thanks for the tip. In the process of firebug-ing the issue, I found out that 'blur' event was being called before mouse-click selection on autocomplete menu. Once I changed the logic around this to handle both these events in a particular order, select now works via mouse click. – Astronomy

@txciggy: can you describe exactly how you "changed the logic around this to handle both these events in a particular order"? I'm running into this problem and my knowledge of event handling in JS isn't good enough yet for me to figure this out myself. thanks – Grubstake

@LukeGriffiths: I added a flag 'autocomplete=false' global to blur and autocomplete. When I enter my autocomplete input field's blur handling function, I have a if(!autocomplete) {//do blur stuff here}. In autocomplete 'focus', I set autocomplete=true; In autocomplete 'close', I set autocomplete=false and explicitly call blur() on my autocomplete field. – Astronomy

Answer 1

I was facing a similar problem. I wanted to submit the form when the user clicked on an option. But the form got submitted even before the value of the input could be set. Hence on the server side the controller got a null value.

I solved it using a modified version of William Niu's answer on another related post - jQuery UI autocomplete select event not working with mouse click

I basically checked for the event type. If it was a click then I explicitly set the input box's value to the value in ui.item.value. See the snippet below,

jQuery( "#autoDropDown" ).autocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0,
    select: function( event, ui ) {
        var origEvent = event;
        while (origEvent.originalEvent !== undefined){
            origEvent = origEvent.originalEvent;
        }
        //console.info('Event type = ' + origEvent.type);
        //console.info('ui.item.value = ' + ui.item.value);
        if (origEvent.type == 'click'){
            document.getElementById('autoDropDown').value = ui.item.value;
            document.getElementById('myForm').submit();
        } else {
            document.getElementById('myForm').submit();     
        }

    }
    });

Adam

Answer 2

I have the same issue, but in my case it is even more strange. the select event is fired every second time (when using the mouse). for me the select event is also fired just fine in case i use my keyboard.

unfortunately I could not reproduce this issue via jsfiddle. but i still want to offer my jsfiddle, maybe it is a good starting point for further analysis. here is my jsFiddle code: http://jsfiddle.net/knzNg/

The only difference is that I use a local array as datasource for the autocomplete data. I guess it is better to change the code to use a remote datasource.

Endear

I tried to reproduce this issue with faked remote datasources using fiddler: jsfiddle.net/knzNg/2, unfortunately I could not reproduce this issue :-( – Endear

Do you have other mouse event handlers such as blur, hover, dblclick, mouseover, mouseout etc? In my case I had a blur handler which would override click event on the menu. Once I changed the logic around it, everything works as expected. – Astronomy

@txciggy I solved the issue in my case. the problem really was that some javascript code which i was not aware of did some dom manipulations which caused the jq ui widget to call the destroy function of autocomplete and recreate it again. so the problem in my case definitely seems to be that other js code... so in the future i will be more aware of this. thanks a lot! – Endear

Answer 3

I tested it in all version of IE (inlcuding 9) and always ended up with an empty input-control after I selected the an item using the mouse. This caused some headaches. I even went down to the source code of jQuery UI to see what happens there but didn’t find any hints either. We can do this by setting a timeout, which internally queues an event in the javascript-engine of IE. Because it is guaranteed, that this timeout-event will be queued after the focus event (this has already been triggered before by IE itself)

select: function (event, ui) {
    var label = ui.item.label;
    var value = ui.item.value;
    $this = $(this);
    setTimeout(function () {
        $('#txtBoxRole').val(value);
    }, 1);
},

Hunsaker

Answer 4

If anybody else is facing this :-) after some 2 and a half years ..

The solution to the OP's problem is to call event.stopPropagation() inside your select callback. Example:

$input.autocomplete( {
    // ... options
    select: function( event, ui ) {
        // ... handlers
        e.stopPropagation();
    }
} );

just returning false from the callback did not work

Footstool

Answer 5

I think there might be a bug in the combo box code, as I couldn't get this to work either. Try changing 'select:' to 'selected:'.

Or you could try changing the code in the actual JQuery UI code, I believe below is the culprit so a change to 'select' might work. I say might as I've not tried it, I simply went with the above.

select: function( event ) {
    this._trigger("selected", event, { item: this.active });
}

Expansive

Error Uncaught TypeError: this._trigger is not a function, is what a version? – Gwenora

Answer 6

I have the same issue and after a lot of googling, it seems that some other jquery plugin is conflicting with the UI Core. So the result was that my jquery validation plugin version 1.6 was causing the error. I have changed jquery validation to 1.9 and now autocomplete is selectable using mouse.

Leroi

Answer 7

Changing jquery validation plugin version to 1.9 works for me

Larimer

This was also my problem. It appears there is some conflict between older versions. – Raguelragweed

Answer 8

I had this problem today and found that the field which should have autocomplete, had a focus event which used document.getElementById('id').value= with wrong ID, thereby stopping the scripts.

Pulsatory

Answer 9

@atsurti's comment is well intentioned, but there's a better way.

Just use a timeout instead, allowing jQuery the time to set the form. Less code = better code, yes? :)

jQuery( "#autoDropDown" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0,
  select: function( event, ui ) {
    window.setTimeout(function(){
      document.getElementById('myForm').submit();  
    }, 1);
  }
});

Rhetorical

Answer 10

This works for me:

$this.find('input').autocomplete({
    source: "/autocomplete_tc_testcasename", 
    minLength: 2,
    },   


    focus: function(event, ui) { 
        $('#input').val(ui.item.value); 
    },

    select: function () {
        $("#button").click();
    }


}); 

Claxton