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

jquery autocomplete dropdown
jquery autocomplete ajax
jquery autocomplete response
jquery autocomplete select event
javascript autocomplete textbox
jquery ui
jquery ui-autocomplete destroy
jquery autocomplete ajax json

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!

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

    }
    });

JqueryUI - Autocomplete, JqueryUI - Autocomplete - Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of​  JqueryUI - Autocomplete - Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has

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

jQuery UI Autocomplete, jQueryUI provides an autocomplete widget to facilitates users by giving a list of suggestions to type in a text box. It is a control that acts a lot like a <select>  Styling JQuery UI Autocomplete. Ask Question Asked 6 years, 10 months ago. Active 2 years, 6 months ago. Viewed 144k times 51. 11. Fiddle. I'm trying

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.

jQuery UI example - automatically (Autocomplete), Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI auto-completion (Autocomplete) - The default function </ title> <Link rel  Alright been racking my brain on this (im terrible at this) but yea ive tried reading all i can and still cant get it to work. trying to do autocomplete with jquery ui my json looks like this {"

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

jQuery UI Autocomplete, jQuery UI Autocomplete. by jQuery Foundation and other contributors. Lists suggested words as the user is typing. Tags. autocomplete · form · predict · suggest  I've got a good solution I implemented in an intranet app; it uses the jQuery UI Autocomplete function with an HttpHandler, and only searches for customers beginning with whatever's in the input; it's also only triggered when there are 3 or more characters typed.

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

JqueryUI autocomplete input field, Seems to work when adding return false to the select function. Cancels the default, which, as the manual mentions, is to replace the text field's  jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

jQuery autocomplete, jQuery Autocomplete allows you to easily create autocomplete and autosuggest If you use it with jQuery UI library it also has plugin named autocomplete . The autocomplete widget uses the jQuery UI CSS framework to style its look and feel. If autocomplete specific styling is needed, the following CSS class names can be used:

How to Use the jQuery UI Autocomplete Widget, In this tutorial we'll be looking at one of jQuery UI 1.8's newest components - the Autocomplete widget. Auto-completing text fields can be a  jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Accessible jQuery UI Autocomplete, Accessible jQuery UI Autocomplete. Code X. ARIA Spec & jQuery UI Info: http://​w3c.github.io  jQuery UI Autocomplete by jQuery Foundation and other contributors Lists suggested words as the user is typing.

Comments
  • 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 ....
  • 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.
  • @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
  • @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.
  • I tried to reproduce this issue with faked remote datasources using fiddler: jsfiddle.net/knzNg/2, unfortunately I could not reproduce this issue :-(
  • 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.
  • @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!
  • Error Uncaught TypeError: this._trigger is not a function, is what a version?
  • This was also my problem. It appears there is some conflict between older versions.