jQuery自动完成加载

Posted 2023-05-08

【中文标题】jQuery自动完成加载

【英文标题】：Jquery autocomplete onload

【发布时间】：2020-07-07 08:58:27

【问题描述】：

我正在使用 jquery 自动完成插件。 一切都按预期工作，但我想要的是在下拉列表中只有一项时触发 select 函数，以便自动填充字段。基本上是在页面加载后进行设置。

这是我正在做的一个示例：

$('#auto-complete').autocomplete(
    source:function()//get data here,
    select:function(e,ui)
     //setting fields here: 
      $('#user').val("");
    ,
   focus:function()

);

我已经探索过添加响应功能，但即使这样似乎也需要先更改自动完成字段。

【问题讨论】：

这能回答你的问题吗？ jquery autocomplete textbox set value programmatically

select 操作仅在用户进行选择时触发。您可以使用.trigger() 触发它。

【参考方案1】：

您可以使用Response 回调：

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

来源：https://api.jqueryui.com/autocomplete/#event-response

$(function() 
  /*
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "javascript",
      "Lisp",
      "Perl",
      "php",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    */

  var availableTags = [
    "ActionScript"
  ];


  $("#tags").autocomplete(
    source: availableTags,
    minLength: 0,
    response: function(e, ui) 
      if (ui.content.length == 1) 
        $(this).val(ui.content[0].value);
        $(this).autocomplete("close");
      
    
  );

  $("#tags").autocomplete("search", "");
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

这有助于在调用自定义源后测试结果。我怀疑你需要更新一下。

或者，您可以在将结果发送到 response() 之前测试结果，如果它们只有 1，则在那时设置 value。