Question

实现的想法是发票，包括字段项，描述，费率等。每行字段，带有添加行 - 由jquery clone实现。它正在发挥作用。

但是，我还有一个工作自动完成功能，它从数据库中获取数据，并更新其余字段。

但是我不能让两个人一起工作。我不知道如何解释它。

因此;

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

因此，自动完成功能适用于第一行 - 因为我得到了＃34;标签＆＃34;来自文本输入的id。

但是，如果我添加更多内容，由于ID重复，让自动填充工作无效。

我的问题是这样的;如何动态地将唯一ID添加到＆＃34;标签＆＃34; 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);
    });
});

使用ajax自动完成的jQuery克隆

1 个答案: