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

问题

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!

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

    }
    });

回答2:

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

回答3:

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.

回答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

回答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 });
}

回答6:

Changing jquery validation plugin version to 1.9 works for me

回答7:

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.

回答8:

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

回答9:

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.

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


});

来源：https://stackoverflow.com/questions/9809013/jqueryui-autocomplete-select-does-not-work-on-mouse-click-but-works-on-key-eve

标签

jquery

select

autocomplete

click

mouse