Jquery autocomplete is not working with dynamically added row

Question

On click on #add I am calling add_table_row() to add new row in table

    <tr class="item" id="item1">
         <td><input type="text" name="billProductList[0].product.name" 
               id="billProductList_0__product_name" class="name></td>
                    ..............   
   </tr>

Each row in similar to above one only the numbers are incremented by one.

For first .name jquery autocomplete is working properly but for dynamically added row it is not working

function add_table_row() {
    var t = $('.table .item:last').attr('id');
    var prs = t.slice(4);
    var num1 = parseInt(prs) + 1;
    var dataString = 'rowId=' + num1;
    $.ajax({
        type: "POST",
        url: "getNewBillRow",
        data: dataString,
        dataType: "html",
        success: function(data) {
            $(".table .item:last").after(data);
        }
    });
}  

$(document).on('click', '#add', function(event) {
    event.preventDefault();
    add_table_row();
});     
$(".name").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "ProductByName",
            dataType: "json",
            data: {
                name: request.term,
                maxRows: 12
            },
            success: function(data) {
                response($.map(data.productList, function(item) {
                    console.log(item);
                    return {
                        label: item.name,
                        value: item.name,
                        id: item.id,
                        desc: item.desc,
                    }
                }));
            },
            error: function(data) {
                console.log(typeof data);
            }
        });
    },
    minLength: 1,
    select: function(event, ui) {
        log(ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        var pid = $(this).parents('.item').attr('id');
        //alert(ui.item.id + " " + ui.item.desc);
        $("#" + pid + " .id").val(ui.item.id);
        $("#" + pid + " .description").val(ui.item.desc);

    },
    open: function() {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function() {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});

How to make it to work for all .name .

Answer 1

This is because when you bind autocomplete() to .name, the other controls (dynamic controls) doesn't exist in the DOM. So you need to rebind the function after adding the control to the DOM. You can do something like this:

function BindAutoComplete() {
$(".name").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "ProductByName",
            dataType: "json",
            data: {
                name: request.term,
                maxRows: 12
            },
            success: function(data) {
                response($.map(data.productList, function(item) {
                    console.log(item);
                    return {
                        label: item.name,
                        value: item.name,
                        id: item.id,
                        desc: item.desc,
                    }
                }));
            },
            error: function(data) {
                console.log(typeof data);
            }
        });
    },
    minLength: 1,
    select: function(event, ui) {
        log(ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        var pid = $(this).parents('.item').attr('id');
        //alert(ui.item.id + " " + ui.item.desc);
        $("#" + pid + " .id").val(ui.item.id);
        $("#" + pid + " .description").val(ui.item.desc);

    },
    open: function() {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function() {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});
}

Then in your ajax call :

function add_table_row() {
    var t = $('.table .item:last').attr('id');
    var prs = t.slice(4);
    var num1 = parseInt(prs) + 1;
    var dataString = 'rowId=' + num1;
    $.ajax({
        type: "POST",
        url: "getNewBillRow",
        data: dataString,
        dataType: "html",
        success: function(data) {
            $(".table .item:last").after(data);
              BindAutoComplete(); 
        }
    });
 } 

Answer 2

After you add the new row, you need to initialize autocomplete on the newly added .name field.

success: function(data) {
    $(".table .item:last").after(data);
    $(".table .item:last .name").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "ProductByName",
                dataType: "json",
                data: {
                    name: request.term,
                    maxRows: 12
                },
                success: function(data) {
                    response($.map(data.productList, function(item) {
                        console.log(item);
                        return {
                            label: item.name,
                            value: item.name,
                            id: item.id,
                            desc: item.desc,
                        }
                    }));
                },
                error: function(data) {
                    console.log(typeof data);
                }
            });
        },
        minLength: 1,
        select: function(event, ui) {
            log(ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
            var pid = $(this).parents('.item').attr('id');
            //alert(ui.item.id + " " + ui.item.desc);
            $("#" + pid + " .id").val(ui.item.id);
            $("#" + pid + " .description").val(ui.item.desc);

        },
        open: function() {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function() {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
}