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（不是事件1）的意思是“建议”用户列表中存在值/标签，他们需要自己选择它。因此，是的，如果您需要以编程方式选择一个值（无需用户交互），则可能需要通过.val()和可选的.trigger()来实现。

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

1 个答案:

编辑