autosuggest key events

[raj]

Hi,
I have problem in working with key events for my code .
i pasted my js and html file down

js:


var xmlHttp;
var str1;
var str_main;
var mkArray;
var mySplitResult;
var main_arrstring;
function GetXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function showHint(str) {
document.getElementById("txtHint").style.display = "none";
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
document.getElementById("txtHint").style.display = "none";
return;
}
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Your browser does not support AJAX!");
return;
}
var url = "WelcomeServ.do";
url = url + "?name=" + str;
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send("name=" + str);
}

function stateChanged() {
var str = txtHint;
var mdiv;
if (xmlHttp.readyState == 4) {
mkArray = xmlHttp.responseText;
if (mkArray.length == 0) {
document.getElementById("txtHint").style.visibilty = "hidden";
}
str1 = makeArray();
document.getElementById("txtHint").innerHTML = str1;
document.getElementById("txtHint").style.border = "0px solid #A5ACB2";
}
}
function makeArray() {
document.getElementById("txtHint").style.display = "none";
var myString = mkArray;
mySplitResult = myString.split(",");
main_arrstring = "";
var len = 10;
if (mySplitResult.length > len) {
len = 5;
} else {
len = mySplitResult.length;
}
document.getElementById("txtHint").style.display = "block";
document.getElementById("txtHint").style.visibility = "visible";
for (i = 0; i < len; i++) {
if (mySplitResult == "") {
break;
} else {
main_arrstring = main_arrstring + "<tr><td class ='List'><a href=
'javascript:getValue(" + "\"" + mySplitResult + "\"" + ")' > " +
mySplitResult + " </a></td></tr>";
}
}
main_arrstring = " <table class='Hello'>" + main_arrstring + "</
table>";
return main_arrstring;
}
function getValue(st) {
document.forms[0].company.value = st;
document.getElementById("txtHint").style.display = "none";
}



my html file:

<div id= "txtHint"></div>
<html:text property="company" onkeyup="showHint(this.value)"/>


i am getting my suggest values from database and able to populate in
the div tag but iam not able to handle the keys.

only on mouse over and mouse click i am able to select the required
one from the suggestion.

pls help me out in solving for up arrow,down arrow,enter and mouse out
events.
i mean where exactly i need to fit that part of code in.

thanks in adv
Raj