title: jQuery Autocomplete on Dynamically added rows(Using Javascript)
body: <p>Below is the code I am using to dynamically create rows in  HTML page. </p>
  
  <pre><code> 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&lt;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&lt;rowCount; i++) {
              var row = table.rows[i];
              var chkbox = row.cells[0].childNodes[0];
              if(null != chkbox &amp;&amp; true == chkbox.checked) {
                  if(rowCount &lt;= 1) {
                      alert("Cannot delete all the rows.");
                      break;
                  }
                  table.deleteRow(i);
                  rowCount--;
                  i--;
              }
  
          }
          }catch(e) {
              alert(e);
          }
      }
  </code></pre>
  
  <p>Below is the snippet from the HTML document calling the jQuery &amp; addRow &amp; autocomplete functionality,</p>
  
  <pre><code>&lt;script type="text/javascript" src="addbox.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-1.4.2.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src="jquery.autocomplete.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /&gt;
  
  &lt;script type="text/javascript"&gt;
  $().ready(function() {
  $("#1").autocomplete("autocomplete.php",{
  width: 260,
  matchContains: true,
  //mustMatch: true,
  //minChars: 0,
  //multiple: true,
  //highlight: false,
  //multipleSeparator: ",",
  selectFirst: false
  }); 
  });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $().ready(function() {
  $("#3").autocomplete("autocomplete1.php",{
  width: 260,
  matchContains: true,
  //mustMatch: true,
  //minChars: 0,
  //multiple: true,
  //highlight: false,
  //multipleSeparator: ",",
  selectFirst: false
  }); 
  });
  </code></pre>
  
  <p>Here is the function for adding the row button &amp; the table where we're associating the autocomplete with an id,</p>
  
  <pre><code>&lt;input type="text" name="sub" size="76" /&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /&gt;
  
  &lt;INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /&gt;
  &lt;table border="1" cellpadding="10" id="data"&gt;
  &lt;tr&gt;
  </code></pre>
  
  <p>Particulars
     Quantity
     UOM
     Unit Price</p>
  
  <p>Tax
     
     </p>
  
  <pre><code>&lt;table id="dataTable"&gt;
  &lt;TR&gt;
          &lt;TD &gt;&lt;INPUT type="checkbox" name="chk"/&gt;&lt;/TD&gt;
          &lt;TD &gt;&lt;INPUT type="text" name="par[]"size="20" id="3" /&gt;&lt;/TD&gt;
          &lt;TD&gt;&lt;INPUT type="text" name="qua[]" size="5"/&gt;&lt;/TD&gt;
      &lt;TD&gt;&lt;INPUT type="text" name="uom[]" size="5"/&gt;&lt;/TD&gt;
      &lt;TD&gt;&lt;INPUT type="text" name="un[]" size="5"/&gt;&lt;/TD&gt;
  </code></pre>
  
  <p>The auto-complete works <em>only</em> 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 !</p>