如何手动触发搜索，然后在jQueryUI自动完成中手动选择第一个选项？

Question

How can I trigger the search and select manually in jQueryUI autocomplete? In the fiddle example, I have managed to get the search triggered, but the select method isn't able to be triggered and select the first option.

JSFIDDLE

The solution in this thread seems to be outdated. It gives this error:

Uncaught TypeError: Cannot read property '_trigger' of undefined

 $(document).ready(function() { var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"]; var tag = $('#tags'); tag.autocomplete({ source: aTags }); $('div').click(function(){ var newVal = $(this).text(); var oldVal = $('#tags').val(); tag.val(oldVal+newVal) tag.autocomplete('search') tag.data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:tag.val()}}); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div>g</div><div>h</div><div>i</div><div>j</div><div>k</div><div>l</div> <div>m</div><div>n</div><div>o</div><div>p</div> <div>q</div><div>r</div><div>s</div><div>t</div><div>u</div><div>v</div><div>w</div><div>x</div> <div>y</div><div>z</div> <input type='text' title='Tags' id='tags' /> 

Answer 1

I've never been a great fan of relying in private methods (marked with _ by the developer) to achieve functionality because this can break your code in future updates. I checked all the answers in the post you mention and all those methods have more or less issues so I will try to give you a more standard solution.

The problem begins with the use of data('ui-autocomplete') to get the widget instance while the autocomplete plugin expose a public method calling $(selector).autocomplete('instance') to achieve the same thing so don't use that.

Next is the issue that you'll need to wait for the menu to open and the items are rendered to pick the one you want and this must be done in a event (dont use timeouts please!!!). For this you have the autocompleteopen event.

This is my first solution of your problem

$(document).ready(function () {
    ...

    tag.on("autocompleteopen", function (event, ui) {
        // If there are suggestion results
        if (items.lenght > 0) {
            // Select the desired item here
        }
    });

    $('div').click(function () {
        var newVal = $(this).text();
        var oldVal = $('#tags').val();
        tag.val(oldVal + newVal);
        tag.autocomplete('search');         
    })
});

Using tag.autocomplete('instance')._trigger will not work correctly in this case. Although the event is triggered with the correct data the menu won't close and the item wont be automatically selected. You should use a click event on the correct item.

There is another problem you need to solve and is when your users are typing inside the input you probably want this functionality disabled, this can be easily solved with a variable.

Check the solution.

 $(document).ready(function() { var autoPick = false; var aTags = ["ask", "always", "all", "alright", "one", "foo", "blackberry", "tweet", "force9", "westerners", "sport"]; var tag = $('#tags'); tag.autocomplete({ source: aTags }); tag.on("autocompleteopen", function(event, ui) { var items = tag.autocomplete('instance').menu.element.children(); if (items.length > 0 && autoPick) { items.eq(0).trigger('click') autoPick = false; } }); $('div').click(function() { var newVal = $(this).text(); var oldVal = $('#tags').val(); tag.val(oldVal + newVal); autoPick = true; tag.autocomplete('search'); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"> <div>a</div> <div>b</div> <div>c</div> <div>d</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div> <div>l</div> <div>m</div> <div>n</div> <div>o</div> <div>p</div> <div>q</div> <div>r</div> <div>s</div> <div>t</div> <div>u</div> <div>v</div> <div>w</div> <div>x</div> <div>y</div> <div>z</div> <input type='text' title='Tags' id='tags' />