Question

我想创建一个菜单订单表单，用户可以通过使用“添加项目”按钮向表单中添加新字段来动态输入他们想要的项目。我还希望输入字段具有自动完成功能，以帮助用户为该项目选择正确的名称。目前，我有两个功能可以独立工作，就像自动完成功能在第一个默认输入字段上一样，我可以添加新字段，但是新动态生成的字段没有自动完成功能，我不确定为什么。

在第一个输入字段上自动完成：

添加新的输入字段：

自动完成功能不适用于新的输入字段：

我在生成新字段的代码中调用了自动完成功能，并且我专门针对生成的新字段的ID进行了调用，但是由于某些原因，它仍然无法正常工作。

自动完成代码：

var items = JSON.parse(document.getElementById('items').textContent);
function autocomplete(inp, arr) {
 /*the autocomplete function takes two arguments,
 the text field element and an array of possible autocompleted values:*/
 var currentFocus;
 /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
     var a, b, i, val = this.value;
      /*close any already open lists of autocompleted values*/
      closeAllLists();
  if (!val) { return false;}
  currentFocus = -1;
  /*create a DIV element that will contain the items (values):*/
  a = document.createElement("DIV");
  a.setAttribute("id", this.id + "autocomplete-list");
  a.setAttribute("class", "autocomplete-items");
  /*append the DIV element as a child of the autocomplete container:*/
  this.parentNode.appendChild(a);
  /*for each item in the array...*/
  for (i = 0; i < arr.length; i++) {
    /*check if the item starts with the same letters as the text field 
value:*/
    if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
      /*create a DIV element for each matching element:*/
      b = document.createElement("DIV");
      /*make the matching letters bold:*/
      b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + " 
  </strong>";
      b.innerHTML += arr[i].substr(val.length);
      /*insert a input field that will hold the current array item's 
   value:*/
      b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
      /*execute a function when someone clicks on the item value (DIV 
  element):*/
          b.addEventListener("click", function(e) {
          /*insert the value for the autocomplete text field:*/
          inp.value = this.getElementsByTagName("input")[0].value;
          /*close the list of autocompleted values,
          (or any other open lists of autocompleted values:*/
            closeAllLists();
        });
         a.appendChild(b);
      }
    }
   });
    /*execute a function presses a key on the keyboard:*/
    inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "autocomplete-list");
    if (x) x = x.getElementsByTagName("div");
        if (e.keyCode == 40) {
          /*If the arrow DOWN key is pressed,
          increase the currentFocus variable:*/
           currentFocus++;
           /*and and make the current item more visible:*/
           addActive(x);
   } else if (e.keyCode == 38) { //up
     /*If the arrow UP key is pressed,
     decrease the currentFocus variable:*/
     currentFocus--;
     /*and and make the current item more visible:*/
     addActive(x);
   } else if (e.keyCode == 13) {
     /*If the ENTER key is pressed, prevent the form from being  
 submitted,*/
     e.preventDefault();
     if (currentFocus > -1) {
      /*and simulate a click on the "active" item:*/
      if (x) x[currentFocus].click();
    }
  }
 });
 function addActive(x) {
     /*a function to classify an item as "active":*/
     if (!x) return false;
    /*start by removing the "active" class on all items:*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
       if (currentFocus < 0) currentFocus = (x.length - 1);
        /*add class "autocomplete-active":*/
       x[currentFocus].classList.add("autocomplete-active");
 }
 function removeActive(x) {
    /*a function to remove the "active" class from all autocomplete 
items:*/
for (var i = 0; i < x.length; i++) {
  x[i].classList.remove("autocomplete-active");
}
}

function closeAllLists(elmnt) {
      /*close all autocomplete lists in the document,
     except the one passed as an argument:*/
     var x = document.getElementsByClassName("autocomplete-items");
     for (var i = 0; i < x.length; i++) {
        if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    } 
   }
  /*execute a function when someone clicks in the document:*/
  document.addEventListener("click", function (e) {
  closeAllLists(e.target);
 });
 }
 autocomplete(document.getElementById("myInput1"), items);
  /* Add rows to form dynamically */

添加字段：

var counter = 1;
 $("#addrow").on("click", function () {
  if (counter < 20){
    counter++;
    var newRow = $("<tr>");
    var cols = "";
    var optionList;
    for (var x = 1; x < 21; x++) {
        optionList += '<option value=' + x + '>' + x + '</option>';
    }
    cols += '<td><h3>' + counter + '.</h3></td>'
    cols += '<td><input type="search" id="myInput' + counter + '" 
    class="myInput form-control" placeholder = "Enter Item" 
    name="itemName' + counter + '" autocomplete="off"/></td>';
    cols += '<td><select class = "custom-select" name = "itemQuantity' + 
    counter + '">' + optionList +'</select></td>';
    cols += '<td><input type="button" class="ibtnDel btn btn-md btn- 
    danger "  value="Delete"></td>';

    newRow.append(cols);
    $("table.order-list").append(newRow);

    var element = document.getElementById("myInput"+counter);
    console.log(element);

    autocomplete(document.getElementById("myInput"+counter), items);

 }
 });

$("table.order-list").on("click", ".ibtnDel", function (event) {
   $(this).closest("tr").remove();
counter -= 1 
});

基本上，我希望所有动态生成的输入字段的行为都与默认输入字段类似。

请随时要求我阐明代码的任何方面或提供更多代码。任何帮助将不胜感激，谢谢。

自动完成功能不适用于动态生成的表单字段

0 个答案: