模仿google搜索效果
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
Codevar sKey = "";
var currentLine = -1;
function search()
{
if (event.keyCode != 38 && event.keyCode != 40)
{
var otxt = document.getElementById("txtTest");
if (otxt.value == "")
return;
sKey = otxt.value;
var o = AJAX.Web.Search.GetRelation(otxt.value);
var s = o.value;
var as = s.split("|");
var oDiv = document.getElementById("mydiv");
for(var j=0;j<oDiv.childNodes.length;j++)
{
if (oDiv.childNodes[j].tagName == "DIV")
{
oDiv.removeChild(oDiv.childNodes[j]);
j--;
}
}
for (var i = 0;i<as.length;i++)
(function(i){
oDiv.style.display = "";
oDiv.style.border = "solid 1px blue";
var div = document.createElement("div");
div.innerHTML = as[i];
div.onclick = function()
{
otxt.value = this.innerHTML;
}
div.onmouseover = function()
{
div.style.backgroundColor = "blue";
div.style.color = "white";
if (currentLine != i)
{
currentLine = i;
changeItem(false);
}
}
div.onmouseout = function()
{
div.style.backgroundColor = "";
div.style.color = "black";
}
oDiv.appendChild(div);
})(i);
if (as.length > 0 && s.length > 0)
{
var div = document.createElement("div");
div.innerHTML = " <font style='color:blue;text-decoration:underline;'>close</font>"
div.onclick = function()
{
oDiv.style.display = "none";
oDiv.style.border = "";
}
oDiv.appendChild(div);
}
else
{
oDiv.style.display = "none";
oDiv.style.border = "";
}
}
}
function viewEvent(e)
{
if (event.keyCode == 38)
{
currentLine--;
changeItem(true);
};
if (event.keyCode == 40)
{
currentLine++;
changeItem(true);
};
}
function changeItem(o)
{
var it = document.getElementById("mydiv");
for (var i=0;i<it.childNodes.length;i++)
{
it.childNodes[i].style.backgroundColor = "";
it.childNodes[i].style.color = "black";
}
if (currentLine < -1)
currentLine = it.childNodes.length - 2;
if (currentLine == it.childNodes.length-1)
currentLine = -1;
if (currentLine < 0)
{
document.getElementById("txtTest").value = sKey;
}
else
{
it.childNodes[currentLine].style.backgroundColor = "blue";
it.childNodes[currentLine].style.color = "white";
if (o)
document.getElementById("txtTest").value = it.childNodes[currentLine].innerHTML;
}
document.getElementById("txtTest").focus();
}
document.onkeydown=viewEvent;
</script>
<form id="form1" runat="server">
<div style="float:left;"><input style="width:200px;" type="text" id="txtTest" onkeyup="search()" /></div>
<div><input type="button" value="search" /></div>
<div id="mydiv" style="float:left;width:200px;"></div>
</form>
</body>
</html>
