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

Question

我正在使用类别自动完成功能。如果我直接在输入字段中输入，效果很好。但是，如果我使用 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。如果我手动输入输入字段，一切正常，它会在控制台中打印 "source"。

我也试过 this 触发 space 按键。仍然没有运气。

它会工作，但是，如果我单击按钮，然后在输入字段中手动输入 space。

如何解决这个问题？

Answer 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

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

Jquery autocomplete doesn't trigger with javascript set input value

jquery-ui

jquery-ui-autocomplete