javascript - 表单数据自动建议

Question

我有一个按钮(添加更多)，可以在我的表单/表格中添加新行。我想以输入形式添加数据自动建议。所以我尝试了下面的代码。它有效，但仅适用于第一行。它不适用于下一行。谁能纠正我做错了什么？你可以在我的jsFiddle里查一下也 。

<table class="table" id="dataTable" name="table">
 <TD><INPUT type="text" id="tags" /></TD>
</table> 
<br>
<button type="button" class="btn btn-primary" value="Add Row" onclick="addRow('dataTable')">Add More</button>

/*** Form autosuggestion **/
$(function() {
 var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",   
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});

/*** Adding new row **/
function addRow(tableID) {
 var table = document.getElementById(tableID);
 var rowCount = table.rows.length;
 var row = table.insertRow(rowCount);
 var colCount = table.rows[0].cells.length;

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        if(i==1){newcell.innerHTML = (rowCount+1)}
        else{
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
           }
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "test":
                    newcell.childNodes[0].value="";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
}

Answer 1

这背后的原因不起作用是因为您为两个文本字段传递了相同的 id，并且在 HTML 中您不能有重复的 id，因为它没有意义。

在这里你可以做两件事

1. 将类赋予新元素并从类中获取元素
2. 或者当您当时创建一个元素时，为该字段创建一个自动建议对象

这是一个fiddle为你

HTML 代码:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<table class="table" id="dataTable" name="table">
  <TD>
    <INPUT type="text" id="tags" class="autosuggest" />
  </TD>
</table>

<br>

<button type="button" class="btn btn-primary" value="Add Row" onclick="addRow('dataTable')">
    Add More
</button>

JAVASCRIPT 代码:

 function createAutoSuggest(element) { // Created a common function for you
   var availableTags = [
     "ActionScript",
     "AppleScript",
     "Asp",
     "BASIC",
     "C",
     "C++",
     "Clojure",
     "COBOL",
     "ColdFusion",
   ];
   $(element).autocomplete({
     source: availableTags
   });
 }
 $(function() {

   createAutoSuggest($(".autosuggest"));
 });

 function addRow(tableID) {
   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);
   var colCount = table.rows[0].cells.length;

   for (var i = 0; i < colCount; i++) {
     var newcell = row.insertCell(i);
     if (i == 1) {
       newcell.innerHTML = (rowCount + 1)
     } else {
       newcell.innerHTML = table.rows[0].cells[i].innerHTML;
     }

     switch (newcell.childNodes[0].type) {
       case "text":
         newcell.childNodes[0].value = "";
         break;
       case "test":
         newcell.childNodes[0].value = "";
         break;
       case "checkbox":
         newcell.childNodes[0].checked = false;
         break;
       case "select-one":
         newcell.childNodes[0].selectedIndex = 0;
         break;
     }

     if ($(newcell).find('.autosuggest').length > 0) {
       createAutoSuggest($(newcell).find('.autosuggest'));// This is the change you basically need
     }
   }
 }