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!

Solution 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();     
        }

    }
    });

Solution 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.

Solution 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);
},

Solution 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

View more solutions