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="newCascad eStyleSheet.css "></a>
<script language="javas cript">
/*
* Returns an new XMLHttpRequest object, or false if the browser
* doesn't support it
*/
var availableSelect List;
function newXMLHttpReque st() {
var xmlreq = false;
// Create XMLHttpRequest object in non-Microsoft browsers
if (window.XMLHttp Request) {
xmlreq = new XMLHttpRequest( );
} else if (window.ActiveX Object) {
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.XMLHT TP");
} 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
* responseXmlHand ler - Function to pass the XML response to
*/
function getReadyStateHa ndler(req, responseXmlHand ler) {
// 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.
responseXmlHand ler(req.respons eXML);
} else {
// An HTTP problem has occurred
alert("HTTP error "+req.statu s+": "+req.statusTex t);
}
}
}
}
function search(searchKe y) {
var form = document.forms[0];
var keyValue = document.getEle mentById("getCi ties").value;
keyValue = keyValue.replac e(/^\s*|\s*$/g,"");
if (keyValue.lengt h > 1)
{
availableSelect List = document.getEle mentById("searc hResult");
var req = newXMLHttpReque st();
req.onreadystat echange = getReadyStateHa ndler(req, update);
req.open("POST" ,"<%=request.ge tContextPath()% >/searchCity.do", true);
req.setRequestH eader("Content-Type", "applicatio n/x-www-form-urlencoded");
req.send("getCi ties="+keyValue );
}
}
function update(cartXML)
{
var countries = cartXML.getElem entsByTagName(" cities")[0];
//availableSelect List.options.le ngth = 0;
var country = countries.getEl ementsByTagName ("city");
availableSelect List.innerHTML = '';
for (var i = 0; i < country.length ; i++)
{
ndValue = country[i].firstChild.nod eValue;
availableSelect List.innerHTML += ndValue +"<BR>\n";
}
}
</script>
</head>
<body>
<form action="/searchCity" id="searchByCit yForm">
<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="sear ch(this);" style="width:30 0px;" autocomplete="o ff" >
<div id="searchResul t" name="searchRes ult" 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 availableSelect List, 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
