天天看點
傳回

用AJAX實作google輸入自動完成的簡單模拟(轉)

用AJAX實作google輸入自動完成的簡單模拟 2009-03-02 13:00

比較簡單的模拟,文本框輸入CompanyName,然後

搜尋SqlServer2000 裡NorthWind資料庫 Suppliers表的CompanyName字段,

然後實作自動完成

四個檔案

1 .AutoComplete.htm

<!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 οnlοad="initPar()">

CompanyName<input type="text" id="txtCompanyName" οnkeyup="autoComplete()" οnblur="setDisplay();" style="width:400px"/>

<!-- 顯示下拉表的div-->

<div id="divContent" style="display:none; position:absolute; ">

</div>

</body>

</html>

AutoComplete.aspx

<%@ Page Language="C#" CodeBehind="AutoComplete.aspx.cs" Inherits="AJAXBaseHome.AutoComplete" %>

AutoComplete.aspx.cs

using 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();

             }

         }

     }

}

xslt檔案 用于顯示xml資料

<?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中單擊時選擇目前值, 滑鼠在上時更改行背景顔色,滑鼠離開後清除背景顔色-->

        <td onclick="selValue()" style="cursor:hand" onmouseover="clearColor();this.parentElement.style.backgroundColor='InfoBackground'" onmouseout="clearColor()">

          <xsl:value-of select="CompanyName"/>

        </td>

      </tr>

    </xsl:for-each>

    </table>

  </xsl:template>

</xsl:stylesheet>

ajax google autocomplete function stylesheet XSL
上一篇: 玫珂菲官宣成毅成為全球品牌代言人近日，MAKEUPFOREVER重磅更新旗下明星定妝單品「大白噴」，推出全新定妝「水光噴
下一篇: 打通本地部署和公有雲，混合雲架構讓“魚”和“熊掌”兼得（一）

繼續閱讀