Jquery自动完成不会用javascript设置输入值触发答案

【问题标题】：Jquery autocomplete doesn't trigger with javascript set input valueJquery自动完成不会用javascript设置输入值触发
【发布时间】：2019-07-25 23:52:10
【问题描述】：

我正在使用类别自动完成功能。如果我直接输入输入字段，它工作正常。但是，如果我使用 javascript 为输入字段设置值，则不会触发自动完成。

小部件部分与jqueryui site 相同。这是sample jsfiddle

//sample HTML
<input id="search">
<button id="button">Click</button>

//sample JS
$(document).on("keyup", '#search', function(event){
   $.ajax{
      ...
      autocomplete_data = ajax_provided_data;
      $("#search").catcomplete({
         source: function(request, response){
            console.log("source");
            response(autocomplete_data);
         },
         select: function(event, ui){
            //do stuff
         }
      });
   }
});

$(document).on("click", "#button", function(event){
   $("#search").val("abcd");
   $("#search").keyup();
});

当我点击#button 时，输入的值发生了变化，keyup() 被触发，ajax 运行。但是，catcomplete() 不会触发。它永远不会在source 函数中使用console.log。如果我手动输入输入字段，一切正常，它会在控制台中打印“源”。

我也试过this 来触发空格键。还是没有运气。

但是，如果我单击按钮，然后在输入字段中手动输入空格，它将起作用。

我该如何解决这个问题？

【问题讨论】：

标签： jquery-ui jquery-ui-autocomplete

【解决方案1】：

我查看了jquery-ui.js 自动完成部分。为了触发完整的自动完成功能，keydown 或 input 事件需要发生。

通过修改this，将keyup改为keydown，就可以了。

function ShowAutoComplete($field, searchVal) {
   var e = $.Event('keydown');
   e.which = 32;
   $field.val(searchVal).focus().trigger(e);
}

Working jsfiddle

【讨论】：