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