来自数组 JS 的自动完成输入表单

Posted 2023-05-08

【中文标题】来自数组 JS 的自动完成输入表单

【英文标题】：Autocomplete input form from array JS

【发布时间】：2021-08-02 16:06:40

【问题描述】：

嗨，我需要创建一个表单，当我在其中放置 batch_num 时，我希望表单中的其他 2 个输入文本，使用从查询/数组中获取的材料名称和材料代码自动填充我发现了这个，但它给了我错误该自动完成功能不存在：

未捕获的类型错误：$(...).autocomplete 不是函数

如何修复错误或进行自动完成输入？

$(function() 
var users = [
    "email": "[e-mail]",
    "name": "marie"
, 
    "email": "[e-mail]",
    "name": "miss"
];

function handleAutocomplete(term) 
    // use 'term' for custom filtering etc.
    var options = $.grep(users, function(e) return e.name.startsWith(term); );
    return options;

$("#name").autocomplete(
    minLength: 0,
    source: function(request, response) 
        var name = request.term;
        var data = handleAutocomplete(name); /* get answers from somewhere.. */
        response(data);
    ,
    focus: function(event, ui) 
        $("#name").val(ui.item.name);
        return false;
    ,

    select: function(event, ui) 
        $("#name").val(ui.item.name);
        $("#email").html(ui.item.email);
        return false;
    
).autocomplete("instance")._renderItem = function(ul, item) 
    return $("<li>")
        .append("<a>" + item.name + "<br>" + item.email + "</a>")
        .appendTo(ul);
;
);

【问题讨论】：

该错误表明您没有在页面中包含包含自动完成功能的 javascript 文件。

【参考方案1】：

你不应该在你的项目渲染中使用<a>。请看：https://jqueryui.com/autocomplete/#custom-data

我测试了您的代码，当您添加 jQuery UI 时它可以正常工作：

$(function() 
  var users = [
    email: "[e-mail]",
    name: "marie",
    label: "marie",
    value: "[e-mail]"
  , 
    email: "[e-mail]",
    name: "miss",
    label: "miss",
    value: "[e-mail]"
  ];

  function handleAutocomplete(term) 
    // use 'term' for custom filtering etc.
    var options = $.grep(users, function(e) 
      return e.name.startsWith(term);
    );
    return options;
  

  $("#name").autocomplete(
    minLength: 0,
    source: function(request, response) 
      var name = request.term;
      var data = handleAutocomplete(name); /* get answers from somewhere.. */
      response(data);
    ,
    focus: function(event, ui) 
      $("#name").val(ui.item.name);
      return false;
    ,

    select: function(event, ui) 
      $("#name").val(ui.item.name);
      $("#email").html(ui.item.email);
      return false;
    
  ).autocomplete("instance")._renderItem = function(ul, item) 
    return $("<li>")
      .append("<div>" + item.name + "<br>" + item.email + "</div>")
      .appendTo(ul);
  ;
);

<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>
  <label>Name:</label><input id="name" type="text">
  <div>Email: <span id="email"></span></div>
</div>