jQuery 自动完成搜索和以编程方式选择

Question

我有来自控制器的数据，当页面加载时，我希望自动完成输入搜索该数据并选择它。

我可以使用以下方法搜索数据：

$( "#autocomplete" ).autocomplete( "search", '<?=$ID?>' );

上面的代码有效并显示了自动完成的正确值。现在我无法选择该值，以便自动完成输入触发器发生变化。我希望输入触发更改，因为我会自动填充一些输入。

我以编程方式选择值的方式是：

select: function( event, ui ) {}

现在我发现了这个：

search: function( event, ui ) {},

两者可以结合吗？

如何以编程方式从自动完成中选择搜索到的数据？

更新：

这就是我的自动完成功能的工作方式：

$( ".updatedautocomplete" ).autocomplete({
      source:function(request,response){
         var $this = $(this);
         $.post("url",{
            term:request.term
         }).done(function(data, status){
            response($.map( data, function( item ) {
                return {
                    data
                }
                return false; // Prevent the widget from inserting the value.
            }));

        });
      },
      select: function( event, ui ) {
         $( this ).attr( 'data-value' , ui.item.id );
         $( this ).attr( 'data-asd' , ui.item.sad );
         $( this ).val( ui.item.label );
         $( "#modal" ).val( ui.item.qwe.trim() );
         $( "#modal" ).val( ui.item.asd.trim() );
         $( "#modal" ).val( ui.item.zxc.trim() );
         $( "#modal" ).val( ui.item.ert.trim() );
         $( "#modal" ).val( ui.item.dfg.trim() );
        return false;
      }
    });

我想要选择事件的原因是填充一些输入，如源代码所示

Answer 1

您只需在输入元素上执行jQuery.val()，就像这样。

编辑

由于您似乎想在异步数据检索后触发选择，您可能需要response 事件并在那里执行选择。

响应（事件，用户界面）

在搜索完成后、菜单显示之前触发。对于不需要自定义源选项回调的建议数据的本地操作很有用。搜索完成时始终触发此事件，即使由于没有结果或自动完成功能被禁用而不会显示菜单

$(".updatedautocomplete").autocomplete({
  source: function(request, response) {
    var $this = $(this);

    //$.post("url", {
    //  term: request.term
    //})
    //.done(function (data, status) {
    //  response($.map(data, function (item) {
    //      return {
    //        data
    //      }
    //      return false; // Prevent the widget from inserting the value.
    //    }));
    //
    //});

    // Simulates some data returned from server
    response([
      { label: "Javascript", value: "js" },
      { label: "CSharp", value: "cs" },
      { label: "PHP", value: "php" }
    ]);
  },
  response: function(event, ui) {
    // Make your preferred selection here
    var item = ui.content[0].label;

    $(this).val(item).trigger('change');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input class="updatedautocomplete" />

search 和select 是搜索发生时触发的事件。你不执行它们。

此外，我相信search 方法（不是事件一）是为了“建议”用户列表中存在值/标签并且他们需要自己选择它。所以，是的，如果您需要以编程方式选择值（无需用户交互），您可能需要通过.val() 和可选的.trigger() 来完成。