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

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。如果我手动输入输入字段，一切正常，它将在控制台中打印“源”。

我也试过this来触发空格键盘。仍然没有运气。

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

我该如何解决这个问题？

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