Форма ввода автозаполнения из массива JS

#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>