#javascript #jquery #jquery-ui
Вопрос:
привет, мне нужно создать форму, в которой, когда я помещаю batch_num, я хотел бы, чтобы другие 2 вводимых текста в форме, автоматически заполнялись именем материала и кодом материала, взятыми из запроса/массива, я нашел это, но это дает мне ошибку, что функция автозаполнения не существует:
Неперехваченная ошибка типа: $(…).автозаполнение не является функцией
Как я могу исправить ошибку или выполнить ввод автозаполнения?
$(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);
};
});
Комментарии:
1. Ошибка предполагает, что вы не включили файл JavaScript, содержащий функцию автозаполнения, на свою страницу.
Ответ №1:
Вы не должны использовать <a>
его при рендеринге элементов. Пожалуйста, смотрите: https://jqueryui.com/autocomplete/#custom-data
Я протестировал ваш код, и он работает правильно, когда вы добавляете пользовательский интерфейс jQuery:
$(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>