Auto complete dynamically generated text boxes
I need help in filling the dynamically generated text boxes using jquery autocomplete.
Workflow:
1.On clicking add row button a row will be inserted.
2.On the inserted row,the product text box should be filled through auto complete.The same way all the dynamically generated text boxes should be filled by auto complete
Issue:
I have used the jquery auto complete function to fill the text boxes,but the auto complete function is working only for the text box in the first row.I need to fill all the dynamically created text boxes through auto complete function.(The source data is taken from the DB file Productset.jsp )
This is my code.
<html> <head> <script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script> <script src="JS/jquery.autocomplete.js"></script> <script> jQuery(function(){ $("#product").autocomplete("Productset.jsp"); }); </script> <script type="text/javascript"> 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[1].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowDelete = table.rows.length - 1; if (rowDelete > 1) table.deleteRow(rowDelete); else alert("Cannot delete all the rows.") } catch(e) { alert(e); } } </script> </head> <body> <form> <input type="button" value="Add Row" onclick="addRow('dataTable')" /> <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <br/> <br/> <table id="dataTable" align="center" width="350px" border="1"> <tr> <th> Product Name</th> <th>Quantity</th> <th> Brand</th> </tr> <tr> <td> <input type="text" name="pname" id="product" value="" /></td> <td><input type="text" name="qty" value=""/></td> <td><select name="brand"/> <select> <option value="select">SELECT</option> </select> </td> </table> </form> </body> </html>