仿google的suggest

var DivName="";//弹出DIV的名称

//单击单元格赋值

function clickTD(val)

{

document.getElementById("txt1").value=val;

document.getElementById("txt1").focus();

DivNone();

}

//给控件赋值

function givNumber( index )

{

document.getElementById("txt1").value = arr[index];

document.getElementById("txt1").focus();

}

//判断键盘按的方向

function catchKeyBoard()

{

var keyNumber = event.keyCode;

if(keyNumber =='40') //向下

{

if(menuFocusIndex == 10)

{

return true;

}

else if (menuFocusIndex == null) //当焦点在文本框中间时，按向下跳到第一个主体。

{

forceMenuItem(1);

givNumber(0);

}

else

{

forceMenuItem( menuFocusIndex+1 ); //焦点增加1

givNumber(menuFocusIndex-1);

}

else if(keyNumber == '38')//向上

{

if(menuFocusIndex == 1)

{

forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时，按向上让它回到文本框。

}

else

{

forceMenuItem(menuFocusIndex-1); //焦点减少1

givNumber(menuFocusIndex-1);

}

//改变菜单项的颜色

var menuFocusIndex;

function forceMenuItem(index)

{

lastMenuItem = document.getElementById( "menuItem" + menuFocusIndex )

if (lastMenuItem != null )

{

//将上一个变白

lastMenuItem.style.backgroundColor="white";

lastMenuItem.style.color="#000000";

}

var menuItem = document.getElementById( "menuItem" + index );

if ( menuItem == null )

{

document.getElementById("txt1").focus();

}

else

{

menuItem.style.backgroundColor = "#5555CC";

menuItem.style.color = "#FFFFFF";

menuFocusIndex = index;

}

//隐藏层

function DivNone()

{

document.getElementById(DivName).style.display="none";

}

//显示层

function DivShow()

{

document.getElementById(DivName).style.display="";

}

//创建显示层

function createMenu(textBox, menuid)

{

if( document.getElementById( menuid ) == null )

{

var left_new=getPosition(textBox)[1]

var top_new=getPosition(textBox)[0];

var newControl = document.createElement("div"); //创建层

newControl.id = menuid;

document.body.appendChild( newControl );

newControl.style.position = "absolute";

newControl.style.border = "solid 1px #000000";

newControl.style.backgroundColor = "#FFFFFF";

newControl.style.width = textBox.clientWidth + "px"; //绝对宽度

newControl.style.left = left_new + "px"; //位置

newControl.style.top = (top_new + textBox.clientHeight + 2) + "px"; //注意，将此高度加2是为了解决JS出现的非自然因素…

return newControl;

}

else

{

return document.getElementById(menuid);

}

//取得输入框所在的位置

function getPosition(obj)

{

var top = 0,left = 0;

{

top += obj.offsetTop; //距离顶部

left += obj.offsetLeft; //距离左边

}

while (obj = obj.offsetParent);

var arr = new Array();

arr[0] = top;

arr[1] = left;

return arr;

}

//初始程序

function suggest(textBox, menuid,val)

{

if(val!="")

{

var keyNumber = event.keyCode;

if(keyNumber!='40'&&keyNumber!='38')

{

DivName=menuid;

var obj=createMenu(textBox, menuid);

DivNone();

getData(val);

obj.innerHTML='';

obj.innerHTML=handlejs();

DivShow();

}

else

{

catchKeyBoard();

}

//创建xmlHTTPRequest

function getData(va)

{

var url='result.aspx?name='+va;

obj=CreateAJAX();

if(obj)

{

obj.onreadystatechange=handlejs;

obj.open('get',url,true);

obj.send(null);

}

else

alert("创建AJAX对象失败！");

}

//用数组来创建

function createMenuBody( key )

{

var result = "";

var j = 0;

arr = getSearchResult( key ); //获取相应的数组

//最多显示十行数据

if(arr.length > 10)

{

j = 10;

}

else

{

j = arr.length;

}

for ( var i = 0; i < j; i++ ) //循环创建层的主体

result += "<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\" id=\"menuItem"+(i+1)+"\" onmouseover=\"forceMenuItem( "+(i+1)+");\" width=\"100%\" onclick=\"givNumber("+i+")\"><tr><td align=\"left\">" + arr[i] + "</td><td align=\"right\">" + (i+1) + " </td></tr></table>";

return result;

}

function handlejs()

{ var result="";

var myinnerhtml="";

if(obj.readyState==4)

{

if(obj.status==200)

{

if(obj.responseXML)

{

xml=obj.responseXML;

node=xml.getElementsByTagName('content')[0];

var j=0;

if(node.childNodes.length>10)

{

j=10;

}

else

{

j=node.childNodes.length;

}

for(var i=0;i<j;i++)

{

username=xml.getElementsByTagName('UserName')[i].firstChild.nodeValue;

passwd=xml.getElementsByTagName('Passwd')[i].firstChild.nodeValue;

result += "<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\" id=\"menuItem"+(i+1)+"\" onmouseover=\"forceMenuItem( "+(i+1)+");\" width=\"100%\" onclick=\"clickTD('"+username+"');\"><tr><td align=\"left\">" + username + "</td><td align=\"right\">" + (i+1) + " </td></tr></table>";

}

return result;

}//对于obj.responseXML

}//对于obj.status

else

alert("请求的文件出错，请检查！");

}

//创建AJAX

function CreateAJAX()

{

if(typeof(XMLHttpRequest)!="undefined")

return new XMLHttpRequest();

if(window.ActiveXObject)

{

var objs=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHTTP"];

var xmlhttp;

for(var i=0;i<objs.length;i++)

{

try

{

xmlhttp=new ActiveXObject(objs[i]);

return xmlhttp;

}

catch(e)

{

//do nothing

}

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

通过AJAX获取XML文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="result.aspx.cs" Inherits="result" %>

确保前台部分没有其他HTML干扰。

protected void Page_Load(object sender, EventArgs e)

{

Response.Clear();

Response.ContentType = "text/xml";

Response.Charset = "utf-8";

this.CreateXml();

}

protected void CreateXml()

{

string name =string.Empty;

// string name = "8";

if (Request.QueryString["name"] != null)

{

name = Request.QueryString["name"];

}

DataTable dt = Admin.GetTableAdmin(name);

StringBuilder sb = new StringBuilder();

sb.AppendLine(@"<?xml version='1.0' encoding='UTF-8' ?>");

sb.AppendLine(@"<content>");

if (dt.Rows.Count > 0)

{

foreach (DataRow dr in dt.Rows)

{

sb.AppendLine(@"<response>");

sb.AppendLine(@"<UserName>"+dr["username"].ToString()+"</UserName>");

sb.AppendLine(@"<Passwd>"+dr["passwd"].ToString()+"</Passwd>");

sb.AppendLine(@"</response>");

}

sb.AppendLine(@"</content>");

Response.Write(sb.ToString());

}

这个具体取得数据由大家自己根据个人的情况来取得。
发上效果图：

上面具体javascript各位可以自己看着修改，也可以用数组存储数据，这样就支持键盘的上下了。某些javascript代码参考了
http://www.cnblogs.com/ustbwuyi/archive/2006/07/17/452700.html