用AJAX实现google输入自动完成的简单模拟

makuixuan · 发表于 2013-1-23 01:42:15

比较简单的模拟,文本框输入CompanyName,然后
搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,
然后实现自动完成

四个文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>输入自动完成</title>    <script language="javascript">       //输入信息的文本框       var txtInput;       //下拉表当前选中项的索引       var currentIndex = -1;             //初始化参数,和下拉表位置       function initPar()       {             txtInput = document.getElementById("txtCompanyName");          //设置下拉表相对于文本输入框的位置             setPosition();       }                //设置下拉表相对于文本输入框的位置       function setPosition()       {          var width = txtInput.offsetWidth;          var left = getLength("offsetLeft");          var top = getLength("offsetTop") + txtInput.offsetHeight;                      divContent.style.left = left + "px";          divContent.style.top = top + "px";             divContent.style.width = width + "px";       }             //获取对应属性的长度       function getLength(attr)       {          var offset = 0;          var item = txtInput;          while (item)          {                offset += item[attr];                item = item.offsetParent;          }          return offset;       }       //自动完成       function autoComplete()       {          //如果按下向上, 向下或回车          if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)          {                //选择当前项                selItemByKey();          }          else //向服务器发送请求          {                //如果值为空                if (txtInput.value == "")                {                   divContent.style.display='none';                   return;                }                //恢复下拉选择项为 -1                currentIndex = -1;                //开始请求                requestObj = new ActiveXObject("Microsoft.XMLHTTP");                requestObj.onreadystatechange = displayResult;                requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true);                requestObj.send(txtInput.value);             }       }                //显示结果       function displayResult()       {          if (requestObj.readyState == 4)             {                   showData();                   divContent.style.display = "";             }       }                //显示服务器返回的结果 ,并形成下拉表       function showData()       {          //获取数据             var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");             doc.loadXML(requestObj.responseText);                         //显示数据的xslt             var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");             docStyle.async = false;             docStyle.load("list.xslt");                         var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");             docTemplate.stylesheet = docStyle;                         //通过xslt转换xml数据             var processor = docTemplate.createProcessor();             processor.input = doc;             processor.transform();          var res = processor.output;                         //显示转后后的结果             divContent.innerHTML = res;       }                //通过键盘选择下拉项       function selItemByKey()       {          //下拉表          var tbl = document.getElementById("tblContent");          if (!tbl)          {             return;             }          //下拉表的项数          var maxRow = tbl.rows.length;          //向上          if (event.keyCode == 38 && currentIndex > 0)          {                currentIndex--;          }          //向下          else if (event.keyCode == 40 && currentIndex < maxRow-1)          {                currentIndex++;          }          //回车          else if (event.keyCode == 13)          {                selValue();             return;          }                         clearColor();          txtInput.value = tbl.rows[currentIndex].innerText;          //设置当前项背景颜色为blue 标记选中             tbl.rows[currentIndex].style.backgroundColor = "InfoBackground";       }                //清除下拉项的背景颜色       function clearColor()       {          var tbl = document.getElementById("tblContent");          for (var i = 0; i < tbl.rows.length; i++)             {                   tbl.rows[i].style.backgroundColor = "";             }       }                //选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值       function selValue()       {          if (event.keyCode != 13)          {                var text = event.srcElement.innerText;                txtInput.value = text;             }             initList();       }                //文本框失去焦点时设置下拉表可见性       function setDisplay()       {          //获取当前活动td的表格          if (document.activeElement.tagName == "TD")          {                var tbl = document.activeElement.parentElement.parentElement.parentElement;                //如果不是下拉表,则隐藏下拉表                if (tbl.id != "tblContent")                {                   initList();                }             return;          }                         initList();                   }             function initList()       {          divContent.style.display='none';             divContent.innerHTML = "";          currentIndex = -1;       }    </script></head><body >CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()"  style="width:400px"/><div id="divContent" style="display:none; position:absolute; "></div></body></html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoComplete.aspx.cs" Inherits="AJAXBaseHome.AutoComplete" %>AutoComplete.aspx.csusing System;using System.Data;using System.Data.SqlClient;using System.Configuration;using System.Collections;using System.IO;using System.Text;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Web.Configuration;namespace AJAXBaseHome{ public partial class AutoComplete : System.Web.UI.Page    {       private static string conString = WebConfigurationManager.ConnectionStrings["myData"].ConnectionString;       protected void Page_Load(object sender, EventArgs e)       {          string input = GetInput();          Response.Write(GetCompanyName(input));       }       //获取输入的字符串       private string GetInput()       {          Stream s = Request.InputStream;          int count = 0;          byte[] buffer = new byte[1024];          StringBuilder builder = new StringBuilder();          while ((count = s.Read(buffer, 0, 1024)) > 0)          {                builder.Append(Encoding.UTF8.GetString(buffer, 0, count));          }          return builder.ToString();       }       private string GetCompanyName(string input)       {          using (SqlConnection con = new SqlConnection(conString))          {                SqlCommand command = new SqlCommand("select * from suppliers where CompanyName like @Name", con);                command.Parameters.Add(new SqlParameter("@name", input + "%"));                SqlDataAdapter adapter = new SqlDataAdapter(command);                DataSet ds = new DataSet();                adapter.Fill(ds);             return ds.GetXml();          }       }    }}
<?xml version="1.0" encoding="UTF-8" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  <xsl:output method="html"/>  <xsl:template match="/"> <xsl:apply-templates/>  </xsl:template>  <xsl:template match="NewDataSet"> <table id="tblContent" style="background-color:GrayText"> <xsl:for-each select="Table">    <tr>              <td  style="cursor:hand"  onmouseout="clearColor()">       <xsl:value-of select="CompanyName"/>       </td>    </tr> </xsl:for-each> </table>  </xsl:template></xsl:stylesheet>

		自动登录	找回密码
密码			立即注册