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

Question

This question already has an answer here:

• How do you trigger autocomplete “select” event manually in jQueryUI? 9 answers

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

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.

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