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

最新推荐文章于 2021-08-06 17:35:44 发布

原创最新推荐文章于 2021-08-06 17:35:44 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Google #Ajax #UI #Web #XML

Ajax 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的文本框自动完成功能实现方案，通过在用户输入公司名称时查询数据库并展示匹配结果。

比较简单的模拟,文本框输入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 onload="initPar()">
CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()" onblur="setDisplay();" style="width:400px"/>
<!-- 显示下拉表的div-->
<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.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();
             }
         }
     }
}



<?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>