<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="javascript">![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var DivName="";//弹出DIV的名称
//单击单元格赋值
function clickTD(val)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
document.getElementById("txt1").value=val;
document.getElementById("txt1").focus();
DivNone();
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//给控件赋值
function givNumber( index )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.getElementById("txt1").value = arr[index];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.getElementById("txt1").focus();
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//判断键盘按的方向
function catchKeyBoard()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var keyNumber = event.keyCode;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if(keyNumber =='40') //向下
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if(menuFocusIndex == 10)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return true;
}
else if (menuFocusIndex == null) //当焦点在文本框中间时,按向下跳到第一个主体。
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
forceMenuItem(1);
givNumber(0);
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
forceMenuItem( menuFocusIndex+1 ); //焦点增加1
givNumber(menuFocusIndex-1);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
else if(keyNumber == '38')//向上
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(menuFocusIndex == 1)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时,按向上让它回到文本框。
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
forceMenuItem(menuFocusIndex-1); //焦点减少1
givNumber(menuFocusIndex-1);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
}
//改变菜单项的颜色
var menuFocusIndex;
function forceMenuItem(index)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
lastMenuItem = document.getElementById( "menuItem" + menuFocusIndex )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (lastMenuItem != null )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//将上一个变白
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
lastMenuItem.style.backgroundColor="white";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
lastMenuItem.style.color="#000000";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var menuItem = document.getElementById( "menuItem" + index );
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ( menuItem == null )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.getElementById("txt1").focus();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
menuItem.style.backgroundColor = "#5555CC";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
menuItem.style.color = "#FFFFFF";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
menuFocusIndex = index;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//隐藏层
function DivNone()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
document.getElementById(DivName).style.display="none";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
//显示层
function DivShow()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
document.getElementById(DivName).style.display="";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//创建显示层
function createMenu(textBox, menuid)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if( document.getElementById( menuid ) == null )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var left_new=getPosition(textBox)[1]
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var top_new=getPosition(textBox)[0];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var newControl = document.createElement("div"); //创建层
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
newControl.id = menuid;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.body.appendChild( newControl );
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
newControl.style.position = "absolute";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
newControl.style.border = "solid 1px #000000";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
newControl.style.backgroundColor = "#FFFFFF";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
newControl.style.width = textBox.clientWidth + "px"; //绝对宽度
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
newControl.style.left = left_new + "px"; //位置
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
newControl.style.top = (top_new + textBox.clientHeight + 2) + "px"; //注意,将此高度加2是为了解决JS出现的非自然因素…
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return newControl;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return document.getElementById(menuid);
}
}
//取得输入框所在的位置
function getPosition(obj)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var top = 0,left = 0;
do
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
top += obj.offsetTop; //距离顶部
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
left += obj.offsetLeft; //距离左边
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
while (obj = obj.offsetParent);
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
//初始程序
function suggest(textBox, menuid,val)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
if(val!="")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var keyNumber = event.keyCode;
if(keyNumber!='40'&&keyNumber!='38')
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
DivName=menuid;
var obj=createMenu(textBox, menuid);
DivNone();
getData(val);
obj.innerHTML='';
obj.innerHTML=handlejs();
DivShow();
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
catchKeyBoard();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//创建xmlHTTPRequest
function getData(va)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var url='result.aspx?name='+va;
obj=CreateAJAX();
if(obj)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
obj.onreadystatechange=handlejs;
obj.open('get',url,true);
obj.send(null);
}
else
alert("创建AJAX对象失败!");
}
//用数组来创建
function createMenuBody( key )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var result = "";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var j = 0;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
arr = getSearchResult( key ); //获取相应的数组
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//最多显示十行数据
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if(arr.length > 10)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
j = 10;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
j = arr.length;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
for ( var i = 0; i < j; i++ ) //循环创建层的主体
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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>";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return result;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
function handlejs()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{ var result="";
var myinnerhtml="";
if(obj.readyState==4)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(obj.status==200)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(obj.responseXML)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
xml=obj.responseXML;
node=xml.getElementsByTagName('content')[0];
var j=0;
if(node.childNodes.length>10)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
j=10;
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
j=node.childNodes.length;
}
for(var i=0;i<j;i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
if(typeof(XMLHttpRequest)!="undefined")
return new XMLHttpRequest();
if(window.ActiveXObject)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
try
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
xmlhttp=new ActiveXObject(objs[i]);
return xmlhttp;
}
catch(e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//do nothing
}
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="txt1" name="txt1" onkeyup="suggest(this,'suggest',this.value)"/>
</div>
</form>
</body>
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
通过AJAX获取XML文件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="result.aspx.cs" Inherits="result" %>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
确保前台部分没有其他HTML干扰。
protected void Page_Load(object sender, EventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
Response.Clear();
Response.ContentType = "text/xml";
Response.Charset = "utf-8";
this.CreateXml();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
protected void CreateXml()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
string name =string.Empty;
// string name = "8";
if (Request.QueryString["name"] != null)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
foreach (DataRow dr in dt.Rows)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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