[英]Autocomplete input form from array JS
嗨,我需要創建一個表單,當我放置一個 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);
};
});
您不應在項目渲染中使用<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.