jQuery Autocomplete on Dynamically added rows(Using Javascript)

Below is the code I am using to dynamically create rows in HTML page.

 function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }

        }
        }catch(e) {
            alert(e);
        }
   开发者_运维知识库 }

Below is the snippet from the HTML document calling the jQuery & addRow & autocomplete functionality,

<script type="text/javascript" src="addbox.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type='text/javascript' src="jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

<script type="text/javascript">
$().ready(function() {
$("#1").autocomplete("autocomplete.php",{
width: 260,
matchContains: true,
//mustMatch: true,
//minChars: 0,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: false
}); 
});
</script>

<script type="text/javascript">
$().ready(function() {
$("#3").autocomplete("autocomplete1.php",{
width: 260,
matchContains: true,
//mustMatch: true,
//minChars: 0,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: false
}); 
});

Here is the function for adding the row button & the table where we're associating the autocomplete with an id,

<input type="text" name="sub" size="76" /><br/><br/>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table border="1" cellpadding="10" id="data">
<tr>

Particulars Quantity UOM Unit Price

Tax

<table id="dataTable">
<TR>
        <TD ><INPUT type="checkbox" name="chk"/></TD>
        <TD ><INPUT type="text" name="par[]"size="20" id="3" /></TD>
        <TD><INPUT type="text" name="qua[]" size="5"/></TD>
    <TD><INPUT type="text" name="uom[]" size="5"/></TD>
    <TD><INPUT type="text" name="un[]" size="5"/></TD>

The auto-complete works only for the first input which is displayed by default. It doesn't work at all for additional row(s) which are added using the addrow function. As you can see we've associated id="3" for the input box having name par[]. We believe the problem could be there. Any assistance is much appreciated. Thanks !

the solution is easy, replace the id for a class and then put this class instead of :input in your addrow code, like:

$(function(){
    $('.autocomplete').autocomplete({source: 'autocomplete.php'});
});

i hope it helps you.