asp.net 文本框输入时的自动完成

本文以http://hi.baidu.com/kb81/blog/item/6f7e040848be85d162d98634.html相关内容为基础

Default.aspx

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scripttype="text/javascript"language="javascript">
varXMLHttpReq;
varcompleteDiv;
varinputField;
varcompleteTable;
varcompleteBody;
//创建XMLHttpRequest对象
functioncreateXMLHttpRequest(){
if(window.XMLHttpRequest){//Mozilla浏览器
XMLHttpReq=newXMLHttpRequest();
}
elseif(window.ActiveXObject){//IE浏览器
try{
XMLHttpReq
=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
XMLHttpReq
=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
}

//发送匹配请求函数
functionfindNames(){
inputField
=document.getElementById("names");
completeTable
=document.getElementById("complete_table");
completeDiv
=document.getElementById("popup");
completeBody
=document.getElementById("complete_body");
if(inputField.value.length>0){
createXMLHttpRequest();
varurl
="Default2.aspx?names="+escape(inputField.value);//
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange
=processMatchResponse;//指定响应函数
XMLHttpReq.send(null);//发送请求
}else{
clearNames();
}
}

//处理返回匹配信息函数
functionprocessMatchResponse(){
if(XMLHttpReq.readyState==4){//判断对象状态
if(XMLHttpReq.status==200){//信息已经成功返回,开始处理信息
setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
}
else{//页面不正常
window.alert("您所请求的页面有异常。");
}
}
}

//生成与输入内容匹配行
functionsetNames(names){

clearNames();
varsize
=names.length;

setOffsets();
varrow,cell,txtNode;
for(vari=0;i<size;i++){
varnextNode
=names[i].firstChild.data;
row
=document.createElement("tr");
cell
=document.createElement("td");
cell.onmouseout
=function(){
this.className='mouseOver';
};
cell.onmouseover
=function(){
this.className='mouseOut';
};
cell.setAttribute(
"bgcolor","#ffddcc");
cell.setAttribute(
"border","0");
cell.onclick
=function(){
completeField(
this);
};
txtNode
=document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
completeBody.appendChild(row);
}
}

//设置显示位置
functionsetOffsets(){
completeTable.style.width
="auto";//显示自动完成的提示框宽度自动伸展或缩小
varleft=calculateOffset(inputField,"offsetLeft");
vartop
=calculateOffset(inputField,"offsetTop")+inputField.offsetHeight;
completeDiv.style.border
="black1pxsolid";
completeDiv.style.left
=left+"px";
completeDiv.style.top
=top+"px";
}

//计算显示位置
functioncalculateOffset(field,attr){
varoffset
=0;
while(field){
offset
+=field[attr];
field
=field.offsetParent;
}
returnoffset;
}

//填写输入框
functioncompleteField(cell){
inputField.value
=cell.firstChild.nodeValue;
clearNames();
}

//清除自动完成行
functionclearNames(){
varind
=completeBody.childNodes.length;
for(vari=ind-1;i>=0;i--){
completeBody.removeChild(completeBody.childNodes[i]);
}
completeDiv.style.border
="none";
}

</script>
</head>
<body>
<formid="form1"runat="server">
<h1>
Dictionary
</h1>
<pstyle="text-align:center;">
<labelfor="names">
Search:
<asp:TextBoxID="names"runat="server"></asp:TextBox></label>
<asp:ButtonID="Button1"runat="server"Text="Go"/>
</p>
<divstyle="position:absolute;"id="popup"runat="server">
<tableid="complete_table"border="0"cellspacing="0"cellpadding="0"style="background-color:#cceeff;">
<tbodyid="complete_body">
</tbody>
</table>
</div>
</form>
</body>
</html>
Default.aspx.cs
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;

publicpartialclass_Default:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
this.names.Attributes.Add("onKeyup","findNames();");
}
}
Default2.aspx.cs
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Text;

publicpartialclassDefault2:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
Response.Clear();
Response.ContentType
="text/xml";//设置输出的格式为XML
Response.Charset="UTF-8";//设置输出的编码为UTF-8
this.GetXmlData();

}

privatevoidGetXmlData()
{
//这是用来获取下拉列表框中下面提示的项目数据,获取的数据用XML格式输出
string[]names=newstring[]{"a","ab","abc","a1","a12","1","12","123"};

stringstrPara=Request.QueryString["names"].ToString();//传过来的查询参数

varnameQuery
=fromnameinnames
wherename.ToString().StartsWith(strPara)
selectname;

StringBuilderxmlData
=newStringBuilder();
xmlData.AppendLine(
@"<?xmlversion='1.0'encoding='UTF-8'?>");
xmlData.AppendLine(
@"<response>");

foreach(stringstrinnameQuery)
{
xmlData.AppendLine(
@"<res>"+str+"</res>");
}

xmlData.AppendLine(
@"</response>");
Response.Write(xmlData.ToString());
Response.End();
}

}

你可能感兴趣的:(asp.net)