jquery克隆與ajax自動完成

Question

我真的很難實現這一點。我可以搗鼓jquery，但我希望有人能夠幫助，請。

所實現的想法是發票，具有字段的項目，描述，速率，等等等等

每一行的字段，其中一個附加行 - 通過jquery的克隆實現。它正在工作。

然而，我也有一個工作自動完成，它從數據庫獲取數據，並更新其餘的字段。

但我不能讓兩個一起工作。我不知道如何解釋它。

所以;

<script type="text/javascript"> 
$(function() { 
$("#label").autocomplete({ 
source: "<?=base_url()?>admin/autocomplete/", 
minLength: 1, 
select: function(event, ui) { 
event.preventDefault(); 

this.value = ui.item.valuedesc; 
$('#label').val(ui.item.valuedesc); 
$('#description').val(ui.item.description); 
$('#rate').val(ui.item.rate); 
} 
}); 
}); 
</script> 

然後我得到的回報是valuedesc，description，rate，然後自動更新相關字段。

<input type="text" maxlength="255" name="item_sku[]" data-required="1" class="form-control" id="label" autocomplete="off" required/> 

<input type="text" maxlength="255" name="item_description[]" data-required="1" id="description" class="form-control" required/> 

<input type="text" maxlength="255" name="item_amount[]" data-required="1" id="rate" class="form-control calculate" autocomplete="off" required/> 

這是我用克隆行和清除新添加的行

// add new product row on invoice 
var cloned = $('#invoice_table tr:last').clone(); 
$(".add-row").click(function (e) { 
    e.preventDefault(); 
    cloned.clone().appendTo('#invoice_table').find('input').val(''); 
}); 

因此，自動完成工程第一行的輸入值 - 因爲我得到的「標籤「來自文本輸入的id。

但是，如果我添加更多，獲取自動完成工作不起作用，因爲重複的ID。

我的問題可能會這樣;我如何動態地添加一個唯一的ID到「label」id當前所在的位置。其次，是否有可能改變自動填充JavaScript以防止爲每個克隆重複使用JavaScript？

我希望有人能幫助！

這裏圖像http://i.stack.imgur.com/RxFCN.jpg

Answer 1

做的最簡單的方法是使用類而不是ID-S：

<input type="text" maxlength="255" name="item_sku[]" data-required="1" class="form-control label" autocomplete="off" required/> 
<!-- ... etc ... --> 

，然後每次生成一個新的行時間初始化一個新的自動完成：

$(function() { 
    var options = { 
     source: "<?=base_url()?>admin/autocomplete/", 
     minLength: 1, 
     select: function(event, ui) { 
      event.preventDefault(); 

      this.value = ui.item.valuedesc; 
      $(this).val(ui.item.valuedesc); 
      $(this).parents('tr').find('.description').val(ui.item.description); 
      $(this).parents('tr').find('.rate').val(ui.item.rate); 
     } 
    }; 
    $(".label").autocomplete(options); 


    var cloned = $('#invoice_table tr:last').clone(); 
    $(".add-row").click(function (e) { 
     e.preventDefault(); 
     cloned.clone().appendTo('#invoice_table').find('input').val('') 
               .filter('.label').autocomplete(options); 
    }); 
});