使用.clone（）方法創建的多行jQuery UI自動完成

Question

我幾乎是jQuery的新手...我找到了一些教程/文章解釋 1.如何克隆表格行（用於插入發票詳細信息）： http://forum.jquery.com/topic/validate-will-not-submit-to-server 2.如何使用PHP和MySQL的jQuery用戶界面自動完成（檢索產品從一個數據庫表有用，避免打字一切）：http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

好了，「直到現在我可以克隆錶行，我可以得到autocmplete在第一行工作，但是當我添加另一行時出現問題，並且我期望自動完成工作在那裏 我在StackOverflow中發現了一個線程（http://stackoverflow.com/questions/1492198/jquery-auto-complete-換dynami凱莉產生-文本框），但沒有適用於我的情況看運氣...

而現在，代碼：

HTML部分

<table border="0" cellspacing="0" cellpadding="4" class="grid" id="details"> 
<thead> 
    <tr> 
    <th scope="col">Codice</th> 
    <th scope="col">Nome</th> 
    <th scope="col">Quantità</th> 
    <th scope="col">Unità di misura</th> 
    <th scope="col">Costo U.</th> 
    <th scope="col">Totale</th> 
    </tr> 
</thead> 
<tbody> 
    <tr id="row_0" class="iterable"> 
    <td><input type="text" name="det_sku_0" id="det_sku_0" class="sku required" /></td> 
    <td><input type="text" name="det_name_0" id="det_name_0" class="name required" /></td> 
    <td><input name="det_quantity_0" id="det_quantity_0" type="text" class="required" /></td> 
    <td>&nbsp;</td> 
    <td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td> 
    <td>&nbsp;</td> 
    </tr> 
</tbody> 
</table> 
<ul> 
<li><a href="javascript:void(0);" id="remove" class="icons icon-0">Rimuovi ultima riga</a></li> 
<li><a href="javascript:void(0);" id="add" class="icons icon-new">Aggiungi riga</a></li> 
<li><input type="submit" name="button" id="button" value="Salva tutto" /></li> 
</ul> 

jQuery的部分

function addrow(destination) { 
    rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1; 
    clonecopy = destination.clone(true); 
    clonecopy.attr("class","iterable"); 
    // update numerical suffixes 
    clonecopy.attr("id","row_"+rowcount); 
    clonecopy.find('.sku, .name').val(''); 
    clonecopy.find("input[name^='det_sku']").attr({ 
     "name": "det_sku_"+rowcount, 
     "id": "det_sku_"+rowcount 
    }); 
    clonecopy.find("input[name^='det_name']").attr({ 
     "name": "det_name_"+rowcount, 
     "id": "det_name_"+rowcount 
    }); 
    clonecopy.find("select[name^='det_quantity']").attr({ 
     "name": "det_quantity_"+rowcount, 
     "id": "det_quantity_"+rowcount 
    }); 
    clonecopy.find("select[name^='det_price']").attr({ 
     "name": "det_price"+rowcount, 
     "id": "det_price"+rowcount 
    }); 
    clonecopy.insertAfter(destination); 
    $('#det_arrayitems').val(rowcount); 
    } 

$("#add").click(function() { 
     parent_row = $('#details tbody>tr:last'); 
     addrow(parent_row); 
    });  

$('input.sku').autocomplete({ 
    source: "../json/products.php", 
    minLength: 2, 
    select: function(event, ui) { 
     $(this).parent().siblings().children('input.name').val(ui.item.name); 
    } 
    }) 

我也試過這個（和一些其他的想法），但沒有運氣

$("#add").live("click", function() { 
parent_row = $('#details tbody>tr:last'); 
addrow(parent_row); 
$('input.sku').autocomplete({ 
    source: "../json/products.php", 
    minLength: 2, 
    select: function(event, ui) { 
    $('input.sku').parent().siblings().children('input.name').val(ui.item.name); 
    } 
}) 
}); 

請你能幫助我嗎？ 謝謝...

Answer 1

找到了解決辦法，我只好按照把自動完成的功能addrow內，並從.clone刪除單詞「真」（真）（感謝）本：JQuery: How to clone autocomplete fields?

function addrow(destination) { 
rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1; 
clonecopy = destination.clone(); 
clonecopy.attr("class","iterable"); 
// update numerical suffixes 
clonecopy.attr("id","row_"+rowcount); 
clonecopy.find('.sku, .name').val(''); 
clonecopy.find("input[name^='det_sku']").attr({ 
    "name": "det_sku_"+rowcount, 
    "id": "det_sku_"+rowcount 
}).autocomplete({  
    source: "../json/products.php",  
    minLength: 2, 
    select: function(event, ui) { 
    $(this).parent().siblings().children('input.name').val(ui.item.name);  
    } 
}); 
clonecopy.find("input[name^='det_name']").attr({ 
    "name": "det_name_"+rowcount, 
    "id": "det_name_"+rowcount 
}); 

clonecopy.find("select[name^='det_quantity']").attr({ 
    "name": "det_quantity_"+rowcount, 
    "id": "det_quantity_"+rowcount 
}); 
clonecopy.find("select[name^='det_price']").attr({ 
    "name": "det_price"+rowcount, 
    "id": "det_price"+rowcount 
}); 
clonecopy.insertAfter(destination); 
$('#det_arrayitems').val(rowcount); 

} 

Answer 2

我做了一些類似的地方，我有一個保存所有行的div，並且在一行中的eact輸入字段有一個rel標記，它的名稱和ID的基本部分，然後點擊添加一行我把以下內容：

$("#addChain").click(function() { 
     var index = $("#chainHolder").children().length + 1; 
     $("#chainHolder").children(":first").clone().each(function() { 
     $(this).find(":input").each(function() { 
       $(this).attr("id", $(this).attr("rel")+"["+index+"]"); 
       $(this).attr("name", $(this).attr("rel")+"["+index+"]"); 
      }); 
      $(this).children(":first").val(index); 
     }).appendTo("#chainHolder"); 
    }); 

Answer 3

創建按鈕機智h類名稱addmore，然後在按鈕上單擊調用以下方法。請按照下面的方式構建您的表格行，最後將形成的html附加到您的表格中。

//adds extra table rows 
var i=$('table tr').length; 
$(".addmore").on('click',function(){ 
    html = '<tr>'; 
    html += '<td><input class="case" type="checkbox"/></td>'; 
    html += '<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>'; 
    html += '<td><input type="text" data-type="productName" name="itemName[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>'; 
    html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>'; 
    html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>'; 
    html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>'; 
    html += '</tr>'; 
    $('table').append(html); 
    i++; 
}); 

以下腳本將執行刪除部分...對於刪除類名爲delete的創建按鈕。

//deletes the selected table rows 
$(".delete").on('click', function() { 
    $('.case:checkbox:checked').parents("tr").remove(); 
    $('#check_all').prop("checked", false); 
}); 

我已做了樣本發票系統簡單的教程，你

右提到的所有功能

1. 多個錶行中添加和刪除
2. 多個自動完成和大量

Invoice System Using jQuery AutoComplete