通用的自动完成功能 －Ajax ＋ asp.net

 本文出处：http://hi.baidu.com/kb81/blog/item/6f7e040848be85d162d98634.html

学习了一段时间的ajax，也该做一点实际的东西出来了，有些网站有很多专业的术语，而需要提供想词典一样的页面功能供浏览者使用以便随时参考术语的意思。
         所谓要像词典一样的功能的话，就一定要有查找的功能了，要怎么样设计查找功能才能使使用者更方便的来使用这个词典呢？相信大家也用过金山词霸，在使用词霸查单词的时候，只要输入一个字母，下面就要相应相近的词语出现，慢慢缩小用户查找的范围，这样在用户不是很清楚单词的拼写的时候可以在输入一部分后在下面找到相应的单词，实现快速查找。
         下面我模仿这样的功能，做一个简单的词典查找功能，也就是自动完成功能。不用多说，还是老办法，先贴几张图上来看一下更加明了一点。
         1、当我们需要查找某个单词的时候，在查找输入框里输入字母，随着我们的输入，输入框下面就会出现相应的提示，如下图：      

当我输入字母b的时候，出现了所有数据库中存有以b字母开始的所有项目，这都是实时的，接着可以输入其他的字母，然后就会逐渐缩小搜索的范围。如下图

：）看到了吧，你可以用鼠标点击下面的某个项目，就可以自动填充到文本框里边去了。
         2、原理都清楚了，下面把主要的程序也贴出来给大家看看了。程序主要包括两个部分，C＃后台代码和javascript代码。
         a）C＃后台代码：
         新建一个页面，命名为DictionaryAutoComplete.aspx，把页面除开第一行声明部分的其余代码全部删除掉，然后转到后台C＃代码。（还要在页面的引用入using System.Text;和using System.Data.SqlClient两个命名空间）
      private void GetXmlData() { //这是用来获取下拉列表框中下面提示的项目数据，获取的数据用XML格式输出 SqlConnection conn = new SqlConnection("server=.;database=test;uid=sa;pwd=;"); string names = Request.QueryString["names"]; StringBuilder xmlData = new StringBuilder(); xmlData.AppendLine(@"<?xml version='1.0' encoding='UTF-8' ?>"); xmlData.AppendLine(@"<response>"); string sql = ""; SqlCommand cmd = new SqlCommand(); sql = "select * from Dictionary where words like '" + names + "%'"; cmd = new SqlCommand(sql, conn); conn.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { xmlData.AppendLine(@"<res>" + sdr["words"].ToString() + "</res>"); } sdr.Close(); conn.Close(); xmlData.AppendLine(@"</response>"); Response.Write(xmlData.ToString()); }

      在该页的Page_Load里输入：
          Response.Clear(); Response.ContentType = "text/xml"; //设置输出的格式为XML Response.Charset = "UTF-8"; //设置输出的编码为UTF-8 this.GetXmlData();


      b）javascript代码：
      新建一个js文件，然后输入下面的代码
// JScript 文件
// Dictionaryajax.js

var XMLHttpReq; var completeDiv; var inputField; var completeTable; var completeBody; //创建XMLHttpRequest对象 function createXMLHttpRequest() { if(window.XMLHttpRequest) { //Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } } //发送匹配请求函数 function findNames() { inputField = document.getElementById("names"); completeTable = document.getElementById("complete_table"); completeDiv = document.getElementById("popup"); completeBody = document.getElementById("complete_body"); if (inputField.value.length > 0) { createXMLHttpRequest(); var url = "DictionaryAutoComplete.aspx?names=" + escape(inputField.value); // XMLHttpReq.open("GET", url, true); XMLHttpReq.onreadystatechange = processMatchResponse;//指定响应函数 XMLHttpReq.send(null); // 发送请求 } else { clearNames(); } } // 处理返回匹配信息函数 function processMatchResponse() { if (XMLHttpReq.readyState == 4) { // 判断对象状态 if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息 setNames(XMLHttpReq.responseXML.getElementsByTagName("res")); }else { //页面不正常 window.alert("您所请求的页面有异常。"); } } } //生成与输入内容匹配行 function setNames(names) { clearNames(); var size = names.length; setOffsets(); var row, cell, txtNode; for (var i = 0; i < size; i++) { var nextNode = 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); } } //设置显示位置 function setOffsets() { completeTable.style.width = "auto"; //显示自动完成的提示框宽度自动伸展或缩小 var left = calculateOffset(inputField, "offsetLeft"); var top = calculateOffset(inputField, "offsetTop") + inputField. offsetHeight; completeDiv.style.border = "black 1px solid"; completeDiv.style.left = left + "px"; completeDiv.style.top = top + "px"; } //计算显示位置 function calculateOffset(field, attr) { var offset = 0; while(field) { offset += field[attr]; field = field.offsetParent; } return offset; } //填写输入框 function completeField(cell) { inputField.value = cell.firstChild.nodeValue; clearNames(); } //清除自动完成行 function clearNames() { var ind = completeBody.childNodes.length; for (var i = ind - 1; i >= 0 ; i--) { completeBody.removeChild(completeBody.childNodes[i]); } completeDiv.style.border = "none"; }

然后再新建一个Dictionary.aspx页面，里边包括一个TextBox控件，把其命名为Dictionary1_names，然后导入js文件到页面，然后所有的功能就完成了。赶快试试吧～～～～HTML代码如下：
<h1> Dictionary</h1> <p style="text-align: center;" mce_style="text-align: center;"> <label for="names"> Search : <asp:TextBox ID="names" runat="server"></asp:TextBox></label> <asp:Button ID="Button1" runat="server" Text="Go" /> </p> <div style="position: absolute;" mce_style="position: absolute;" id="popup" runat="server"> <table id="complete_table" border="0" cellspacing="0" cellpadding="0" style="background-color: #cceeff;" mce_style="background-color: #cceeff;"> <tbody id="complete_body"> </tbody> </table> </div>

别忘了在.cs文件Page_load中加入以下代码：

this.names.Attribute.Add("onKeyup","findNames();");