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

Question

如何触发搜索并在jQueryUI自动完成中手动选择？ 在小提琴示例中，我设法触发了搜索，但是无法触发select方法并选择第一个选项。

JSFIDDLE

这个问题的解决方案似乎已经过时了。 它给出了这个错误：

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

我从未成为依赖私有方法（由开发人员用_标记）来实现功能的忠实粉丝，因为这可能会在未来的更新中破坏您的代码。 我检查了你提到的帖子中的所有答案，所有这些方法都有或多或少的问题，所以我会尝试给你一个更标准的解决方案。

问题开始于使用data('ui-autocomplete')获取小部件实例，而自动完成插件公开一个调用$(selector).autocomplete('instance')的公共方法来实现同样的事情所以不要使用那。

接下来是您需要等待菜单打开并且呈现项目以选择您想要的项目的问题，这必须在事件中完成（请不要使用超时！）。 为此，您有autocompleteopen事件。

这是我第一个解决您问题的方法

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

在这种情况下，使用tag.autocomplete('instance')._trigger将无法正常工作。 虽然使用正确的数据触发事件，但菜单不会关闭，并且不会自动选择项目。 您应该在正确的项目上使用click事件。

还有一个问题需要解决，当您的用户在输入内部输入时，您可能希望禁用此功能，这可以通过变量轻松解决。

检查解决方案。

 $(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' />