A-A+

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

2008年01月05日 編程·程序設計 暂无评论 阅读 18,196 views 次

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

四个文件
1 .AutoComplete.htm

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" >  
  3. <head>  
  4.     <title>输入自动完成</title>  
  5.     <script language="javascript">  
  6.         //输入信息的文本框   
  7.         var txtInput;   
  8.         //下拉表当前选中项的索引    
  9.         var currentIndex = -1;    
  10.           
  11.         //初始化参数,和下拉表位置   
  12.         function initPar()   
  13.         {   
  14.              txtInput = document.getElementById("txtCompanyName");   
  15.              //设置下拉表 相对于 文本输入框的位置    
  16.              setPosition();   
  17.         }    
  18.            
  19.         //设置下拉表 相对于 文本输入框的位置   
  20.         function setPosition()   
  21.         {   
  22.             var width = txtInput.offsetWidth;   
  23.             var left = getLength("offsetLeft");   
  24.             var top = getLength("offsetTop") + txtInput.offsetHeight;   
  25.               
  26.             divContent.style.left = left + "px";   
  27.             divContent.style.top = top + "px";    
  28.             divContent.style.width = width + "px";   
  29.         }    
  30.            
  31.        //获取对应属性的长度    
  32.         function getLength(attr)   
  33.         {   
  34.             var offset = 0;   
  35.             var item = txtInput;   
  36.             while (item)   
  37.             {   
  38.                 offset += item[attr];   
  39.                 itemitem = item.offsetParent;   
  40.             }    
  41.             return offset;    
  42.         }    
  43.   
  44.         //自动完成   
  45.         function autoComplete()   
  46.         {   
  47.             //如果按下 向上, 向下 或 回车   
  48.             if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)   
  49.             {    
  50.                 //选择当前项    
  51.                 selItemByKey();   
  52.             }    
  53.             else //向服务器发送请求   
  54.             {    
  55.                 //如果值为空    
  56.                 if (txtInput.value == "")   
  57.                 {   
  58.                     divContent.style.display='none';    
  59.                     return;   
  60.                 }    
  61.                 //恢复下拉选择项为 -1    
  62.                 currentIndex = -1;    
  63.   
  64.                 //开始请求   
  65.                 requestObj = new ActiveXObject("Microsoft.XMLHTTP");   
  66.                 requestObj.onreadystatechange = displayResult;   
  67.                 requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true);   
  68.                 requestObj.send(txtInput.value);    
  69.             }    
  70.         }    
  71.            
  72.         //显示结果    
  73.         function displayResult()   
  74.         {   
  75.              if (requestObj.readyState == 4)   
  76.              {   
  77.                      showData();   
  78.                      divContent.style.display = "";   
  79.              }    
  80.         }    
  81.            
  82.         //显示服务器返回的结果 ,并形成下拉表   
  83.         function showData()   
  84.         {   
  85.              //获取数据    
  86.              var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");   
  87.              doc.loadXML(requestObj.responseText);   
  88.                 
  89.              //显示数据的xslt    
  90.              var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");   
  91.              docStyle.async = false;    
  92.              docStyle.load("list.xslt");   
  93.                  
  94.              var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");   
  95.              docTemplate.stylesheet = docStyle;   
  96.                 
  97.              //通过xslt转换xml数据    
  98.              var processor = docTemplate.createProcessor();   
  99.              processor.input = doc;   
  100.              processor.transform();   
  101.              var res = processor.output;   
  102.                 
  103.              //显示转后后的结果   
  104.              divContent.innerHTML = res;    
  105.         }    
  106.            
  107.         //通过键盘选择下拉项    
  108.         function selItemByKey()   
  109.         {   
  110.             //下拉表    
  111.             var tbl = document.getElementById("tblContent");    
  112.             if (!tbl)   
  113.             {   
  114.                 return;    
  115.             }    
  116.             //下拉表的项数   
  117.             var maxRow = tbl.rows.length;    
  118.             //向上    
  119.             if (event.keyCode == 38 && currentIndex > 0)   
  120.             {   
  121.                  currentIndex--;   
  122.             }    
  123.             //向下    
  124.             else if (event.keyCode == 40 && currentIndex < maxRow-1)   
  125.             {   
  126.                  currentIndex++;   
  127.             }   
  128.             //回车    
  129.             else if (event.keyCode == 13)   
  130.             {   
  131.                 selValue();   
  132.                 return;   
  133.             }    
  134.                
  135.             clearColor();   
  136.             txtInput.value = tbl.rows[currentIndex].innerText;    
  137.             //设置当前项背景颜色为blue 标记选中    
  138.             tbl.rows[currentIndex].style.backgroundColor = "InfoBackground";    
  139.         }    
  140.            
  141.         //清除下拉项的背景颜色    
  142.         function clearColor()   
  143.         {   
  144.              var tbl = document.getElementById("tblContent");   
  145.              for (var i = 0; i < tbl.rows.length; i++)   
  146.              {   
  147.                     tbl.rows[i].style.backgroundColor = "";    
  148.              }    
  149.         }    
  150.            
  151.         //选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值   
  152.         function selValue()   
  153.         {   
  154.             if (event.keyCode != 13)   
  155.             {    
  156.                 var text = event.srcElement.innerText;   
  157.                 txtInput.value = text;    
  158.             }    
  159.             initList();    
  160.         }    
  161.            
  162.         //文本框失去焦点时 设置下拉表可见性    
  163.         function setDisplay()   
  164.         {   
  165.             //获取当前活动td的表格    
  166.             if (document.activeElement.tagName == "TD")   
  167.             {   
  168.                  var tbl = document.activeElement.parentElement.parentElement.parentElement;    
  169.                 //如果不是下拉表,则隐藏 下拉表    
  170.                 if (tbl.id != "tblContent")   
  171.                 {   
  172.                     initList();   
  173.                 }   
  174.                 return;   
  175.             }    
  176.                
  177.             initList();   
  178.                
  179.         }    
  180.           
  181.         function initList()   
  182.         {   
  183.             divContent.style.display='none';    
  184.             divContent.innerHTML = "";   
  185.             currentIndex = -1;   
  186.         }    
  187.     </script>  
  188. </head>  
  189. <body onload="initPar()">  
  190. CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()" onblur="setDisplay();" style="width:400px"/>  
  191. <!-- 显示下拉表的div-->  
  192. <div id="divContent" style="display:none; position:absolute; ">  
  193. </div>  
  194. </body>  
  195. </html>  

2. AutoComplete.aspx 

XML/HTML代码
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoComplete.aspx.cs" Inherits="AJAXBaseHome.AutoComplete" %>  

3. AutoComplete.aspx.cs

C#代码
  1. using System;   
  2. using System.Data;   
  3. using System.Data.SqlClient;   
  4. using System.Configuration;   
  5. using System.Collections;   
  6. using System.IO;   
  7. using System.Text;   
  8. using System.Web;   
  9. using System.Web.Security;   
  10. using System.Web.UI;   
  11. using System.Web.UI.WebControls;   
  12. using System.Web.UI.WebControls.WebParts;   
  13. using System.Web.UI.HtmlControls;   
  14. using System.Web.Configuration;   
  15.   
  16. namespace AJAXBaseHome   
  17. {   
  18.     public partial class AutoComplete : System.Web.UI.Page   
  19.     {   
  20.         private static string conString = WebConfigurationManager.ConnectionStrings["myData"].ConnectionString;   
  21.   
  22.         protected void Page_Load(object sender, EventArgs e)   
  23.         {   
  24.             string input = GetInput();   
  25.             Response.Write(GetCompanyName(input));   
  26.         }   
  27.   
  28.         //获取输入的字符串   
  29.         private string GetInput()   
  30.         {   
  31.             Stream s = Request.InputStream;   
  32.             int count = 0;   
  33.             byte[] buffer = new byte[1024];   
  34.             StringBuilder builder = new StringBuilder();   
  35.             while ((count = s.Read(buffer, 0, 1024)) > 0)   
  36.             {   
  37.                 builder.Append(Encoding.UTF8.GetString(buffer, 0, count));   
  38.             }   
  39.   
  40.             return builder.ToString();   
  41.         }   
  42.   
  43.         private string GetCompanyName(string input)   
  44.         {   
  45.             using (SqlConnection con = new SqlConnection(conString))   
  46.             {   
  47.                 SqlCommand command = new SqlCommand("select * from suppliers where CompanyName like @Name", con);   
  48.                 command.Parameters.Add(new SqlParameter("@name", input + "%"));   
  49.                 SqlDataAdapter adapter = new SqlDataAdapter(command);   
  50.                 DataSet ds = new DataSet();   
  51.                 adapter.Fill(ds);   
  52.                 return ds.GetXml();   
  53.             }   
  54.         }   
  55.     }   
  56. }  

4. xslt文件 用于显示xml数据

 

来源:http://www.vs2005.com/Ajax/a427p1.aspx

XML/HTML代码
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  
  3.   <xsl:output method="html"/>  
  4.   <xsl:template match="/">  
  5.     <xsl:apply-templates/>  
  6.   </xsl:template>  
  7.   <xsl:template match="NewDataSet">  
  8.     <table id="tblContent" style="background-color:GrayText">  
  9.     <xsl:for-each select="Table">  
  10.       <tr>  
  11.         <!--td中单击时选择当前值, 鼠标在上时更改行背景颜色,鼠标离开后清除背景颜色-->  
  12.         <td onclick="selValue()" style="cursor:hand" onmouseover="clearColor();this.parentElement.style.backgroundColor='InfoBackground'" onmouseout="clearColor()">  
  13.           <xsl:value-of select="CompanyName"/>  
  14.         </td>  
  15.       </tr>  
  16.     </xsl:for-each>  
  17.     </table>  
  18.   </xsl:template>  
  19. </xsl:stylesheet>  

给我留言

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

Copyright © 寂寞部屋 保留所有权利.   Theme  Ality

用户登录