12
Hi All,
I have written a AutoSuggest in jsp and am using javascript to call the strut page which calls the database and returns me the xml back.
On the html page i have a text box where i enter the name of the city and I have a DIV tag which I populate with the results.
Now my problem is that, after I get the results back I am not able to select a value from the DIV tag.
Here is the complete jsp code.
[HTML]<html>
<head>
<link style><a href="newCascadeStyleSheet.css"></a>
<script language="javascript">
/*
* Returns an new XMLHttpRequest object, or false if the browser
* doesn't support it
*/
var availableSelectList;
function newXMLHttpRequest() {
var xmlreq = false;
// Create XMLHttpRequest object in non-Microsoft browsers
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
// Try to create XMLHttpRequest in later versions
// of Internet Explorer
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
// Failed to create required ActiveXObject
try {
// Try version supported by older versions
// of Internet Explorer
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// Unable to create an XMLHttpRequest by any means
xmlreq = false;
}
}
}
return xmlreq;
}
/*
* Returns a function that waits for the specified XMLHttpRequest
* to complete, then passes it XML response to the given handler function.
* req - The XMLHttpRequest whose state is changing
* responseXmlHandler - Function to pass the XML response to
*/
function getReadyStateHandler(req, responseXmlHandler) {
// Return an anonymous function that listens to the XMLHttpRequest instance
return function () {
// If the request's status is "complete"
if (req.readyState == 4) {
// Check that we received a successful response from the server
if (req.status == 200) {
// Pass the XML payload of the response to the handler function.
responseXmlHandler(req.responseXML);
} else {
// An HTTP problem has occurred
alert("HTTP error "+req.status+": "+req.statusText);
}
}
}
}
function search(searchKey) {
var form = document.forms[0];
var keyValue = document.getElementById("getCities").value;
keyValue = keyValue.replace(/^\s*|\s*$/g,"");
if (keyValue.length > 1)
{
availableSelectList = document.getElementById("searchResult");
var req = newXMLHttpRequest();
req.onreadystatechange = getReadyStateHandler(req, update);
req.open("POST","<%=request.getContextPath()%>/searchCity.do", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("getCities="+keyValue);
}
}
function update(cartXML)
{
var countries = cartXML.getElementsByTagName("cities")[0];
//availableSelectList.options.length = 0;
var country = countries.getElementsByTagName("city");
availableSelectList.innerHTML = '';
for (var i = 0; i < country.length ; i++)
{
ndValue = country[i].firstChild.nodeValue;
availableSelectList.innerHTML += ndValue +"<BR>\n";
}
}
</script>
</head>
<body>
<form action="/searchCity" id="searchByCityForm">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td ><B>Event Title</b></td>
</tr>
<tr>
<td class="promo">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td valign="top">
<input type="textbox" id="getCities" size="20" onKeyDown="search(this);" style="width:300px;" autocomplete="off" >
<div id="searchResult" name="searchResult" style="z-index: 1; left: 5px; top: 50px; width: 300px;
height: 370px; background-color:#003366; layer-background-color:#003366;"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>[/HTML]
In the searchResult div section, which is populated from availableSelectList, I cannot do a select one value ...can anyone suggest something??
Let me know if you need more info on how the jsp page looks in the browser
