具有Ajax自动完成功能的jQuery克隆

Question

The achieved idea is an invoice, with fields item, description, rate, etc. Each line of fields, with a add row - achieved by jquery clone. And it is working.

However, I also have a working autocomplete, which gets the data from a database, and update the rest of the fields.

But I cant get the two to work together. I don't know how else to explain it.

So;

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

Then the return I get is the valuedesc, description, rate, which then automatically updates the relevan fields.

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

And this is what I use to clone the row and clears the input values of the newly added row

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

So, the autocomplete works for the first row - because I get the "label" id from the text input.

But if I add more, getting the autocomplete to work doesn't work, because of duplicate IDs.

My question would be thus; How can I dynamically add a unique ID to where "label" id currently is? Secondly, is it possible to alter the autocomplete javascript to prevent duplicating the javascript for each clone?

Image here: http://i.stack.imgur.com/RxFCN.jpg

Answer 1

The simplest way of doing it is to use classes instead of id-s:

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

and then initialise a new autocomplete every time you generate a new row:

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