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

最新推荐文章于 2024-09-09 20:38:20 发布

iteye_20105

最新推荐文章于 2024-09-09 20:38:20 发布

阅读量94

点赞数

文章标签： xhtml ui javascript ViewUI

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

Default.aspx

Code
<%@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

Default2.aspx.cs

Code
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();
}

}

iteye_20105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net 文本框输入时的自动完成

本文以http://hi.baidu.com/kb81/blog/item/6f7e040848be85d162d98634.html相关内容为基础Default.aspxCode&lt;!--&lt;br /&gt;&lt;br /&gt;Code highlighting produced by Actipro CodeHighlighter (freeware)&lt;br /&g...
复制链接

扫一扫