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

Question

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

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

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

$(function() {
var users = [{
    "email": "marie@gmail.com",
    "name": "marie"
}, {
    "email": "miss@gmail.com",
    "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);
};
});

Answer 1

您不应在项目渲染中使用<a> 。 请参阅： https://jqueryui.com/autocomplete/#custom-data

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

 $(function() { var users = [{ email: "marie@gmail.com", name: "marie", label: "marie", value: "marie@gmail.com" }, { email: "miss@gmail.com", name: "miss", label: "miss", value: "miss@gmail.com" }]; 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>