JQuery AutoComplete, manually select first searched item and bind click [duplicate]

Question

I want to manually select an item in autocomplete and click it given the value.

Following code:

autocompleteitem.autocomplete("option", "autoFocus", true).autocomplete("search", autocompleteitem.val());

autocompleteitem is an object of input that holds the value i want to search for. Now this code successfully selects the first item from drop down but it does not click on it. I do not want to click on it myself i want it to happen somehow in that code.

I tried the following additions to the code above which didnt work:

   .click(), .select(), .trigger('select'), .find('a').click(), .change()

is there any way i can do it?

thanks

please someone help

Biddle

are you saying if the search value is a specific one then have the code click on the first item? – Mandatory

which autocomplete you are using????? – Balinese

Amin yes thats what im trying to do. JQuery autocomplete – Biddle

im using JQuery ui-autocomplete – Biddle

Answer 1

Take a look at this jqFAQ.com topic, this will help you to programatically pick the first matching option for a value and set it into the autocomplete textbox. There are few other autocomplete related faqs too, i think that may be useful for you.

Lusatia

This link no longer works. – Manrope

Answer 2

If you look at the way the jQuery team does it in their unit tests for autocomplete, they use something similar to the following code:

    var downKeyEvent = $.Event("keydown");
    downKeyEvent.keyCode = $.ui.keyCode.DOWN;  // event for pressing "down" key

    var enterKeyEvent = $.Event("keydown");
    enterKeyEvent.keyCode = $.ui.keyCode.ENTER;  // event for pressing "enter" key

    $("#autoComplete").val("item"); // enter text to trigger autocomplete
    $("#autoComplete").trigger(downKeyEvent);  // First downkey invokes search
    $("#autoComplete").trigger(downKeyEvent);  // Second downkey highlights first item
    $("#autoComplete").trigger(enterKeyEvent); // Enter key selects highlighted item 

This plunk shows it working

She

I would like to note that I was using the combobox jquery plugin (which uses autocomplete) and it required me to fire the DOWN key twice before firing ENTER – Lincolnlincolnshire

Of the several questions/answersets on SO on this subject, this is the only one that actually worked for me. Thanks! – Economics

I also found it necessary to fire the DOWN key twice followed by ENTER. – Spondee

The reason the enter key needs to be fired twice is that the UI needs time to update after the keydown has been pressed. Javascript and UI updates cannot run at the same time. Therefore you need to introduce a time delay using the setTimeout() function. – Boliviano

I believe you can do it with a delay of 0ms. I often use the defer function in underscore just to make the intent more clear to future maintainers. underscorejs.org/#defer – Boliviano