表單數據自我暗示

Question

我有一個按鈕（添加更多），它在我的表單/表格中添加了新行。我想在INPUT窗體中添加數據自動提示。所以我嘗試了下面的代碼。它的工作，但只爲第一行。它不適用於下一行。任何人都可以糾正我我做錯了什麼？您也可以在我的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. 或者當你創建了當時的元素那場

創建一個自動提示對象

這裏是你

HTML代碼fiddle：

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

Answer 2

You can use live to attach events to dynamically created textboxes. 

這裏是example