<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript">
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;
do
{
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>
<form id="form1" runat="server">
<div>
<input id="txt1" name="txt1" onkeyup="suggest(this,'suggest',this.value)"/>
</div>
</form>
</body>
</html>
通过AJAX获取XML文件<head runat="server">
<title>无标题页</title>
<script language="javascript">
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;
do
{
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>
<form id="form1" runat="server">
<div>
<input id="txt1" name="txt1" onkeyup="suggest(this,'suggest',this.value)"/>
</div>
</form>
</body>
</html>
<%@ 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());
}
{
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