Hi,
just check this once for your requirement.
place your cursor in textbox then press buttons up and down you'll see your required output.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language ="javascript" >
function f1() {
}
function f2(tid) {
tid.style.backgroundColor = "White";
tid.style.color = "red";
}
function f3(tid) {
tid.style.backgroundColor = "";
tid.style.color = "";
}
var tmp = -1;
function f4() {
var len = document.getElementById("parntdiv").childNodes.length;
if (parseInt(event.keyCode) == 40) {
if (parseInt(tmp) ==parseInt(len)-1) {
tmp = 0;
}
else {
tmp = parseInt(tmp) + 1;
}
}
if (parseInt(event.keyCode) == 38) {
if (parseInt(tmp) <= 0) {
tmp = parseInt(len) - 1;
}
else {
tmp = parseInt(tmp) - 1;
}
}
fq();
}
function fq() {
var len = document.getElementById("parntdiv").childNodes.length;
if (parseInt(tmp) != parseInt(len) - 1) {
f3(document.getElementById("parntdiv").childNodes[parseInt(tmp) + 1]);
}
if (parseInt(tmp) == parseInt(len) - 1) {
f3(document.getElementById("parntdiv").childNodes[0]);
}
f2(document.getElementById("parntdiv").childNodes[parseInt(tmp)]);
document.getElementById("txtsearch").innerText = document.getElementById("parntdiv").childNodes[parseInt(tmp)].innerText;
if (parseInt(tmp) > 0) {
f3(document.getElementById("parntdiv").childNodes[parseInt(tmp) - 1]);
}
if (parseInt(tmp) == 0 || parseInt(tmp) == -1) {
f3(document.getElementById("parntdiv").childNodes[parseInt(len) - 1]);
}
}
</script>
<style type="text/css">
#txtsearch
{
width: 318px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="dfsdf">
<input type ="text" id="txtsearch" onkeyup="f1()" onkeydown="f4()" /><br />
<div id="parntdiv" style=" width:318px; background-color :Black ; color:White;">
<div id="child1" onmouseenter="f2(this)" onmouseout="f3(this)">child one</div>
<div id="child2" onmouseenter="f2(this)" onmouseout="f3(this)">child two</div>
<div id="child3" onmouseenter="f2(this)" onmouseout="f3(this)">child three</div>
<div id="child4" onmouseenter="f2(this)" onmouseout="f3(this)">child four</div>
<div id="child5" onmouseenter="f2(this)" onmouseout="f3(this)">child five</div>
<div id="child6" onmouseenter="f2(this)" onmouseout="f3(this)">child six</div>
</div>
<br />
<div id="resdiv" style=" width:318px; background-color :Black ; color:White;"></div>
</div>
</form>
</body>
</html>
In the above code you can set those events for normal up and down keystrokes.
I hope you'll understood what I did.
All the Best