Hello,
I have this code to generate Textboxes at the click of a Button -
-------------------------------------------------------------------------------------
<html>
<script>
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow +
1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
<form action="TourPlan.jsp" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" /
>
</p>
<p>
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </
span>
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="3">Sample table</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txtRow1"
id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" />
</td>
</tr>
</table>
</form>
</html>
--------------------------------------------------------------------------------
I want to use the Autocomplete jQuery plugin here for all the
Textboxes -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<script type="text/javascript" src="lib/jquery-1.2.1.js"></script>
<script type='text/javascript' src='lib/jquery.autocomplete.js'></
script>
<link rel="stylesheet" type="text/css" href="lib/
jquery.autocomplete.css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="myform" method="POST" action="JSPFindPaths.jsp">
<table id="mytable" cellspacing="0">
<tr>
<th scope="col" >Station From :</th>
<td class="alt"><input type="text" id="station" value=""
name="station" style="width: 200px;" /></td>
</tr>
<td class="alt"><input type="submit" value="Submit" name="B1"
onclick='return isBlank()'></td>
</tr>
</table>
</form>
<script type="text/javascript">
function findValue(li) {
if( li == null ) return alert("No match!");
// if coming from an AJAX call, let's use the CityId as the value
if( !!li.extra ) var sValue = li.extra[0];
// otherwise, let's just display the value in the text box
else var sValue = li.selectValue;
//alert("The value you selected was: " + sValue);
}
function selectItem(li) {
findValue(li);
}
<!--
function formatItem(row) {
return row[0] + " (id: " + row[1] + ")";
}
-->
function formatItem(row) {
return row[0];
}
$(document).ready(function() {
$("#station").autocomplete(
"myservlet",
{
delay:10,
minChars:1,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);
});
</script>
</body>
</html>
