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

转载 2007年09月25日 12:43: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 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>
 AutoComplete.aspx
<%@ 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();
            }
        }
    }
}

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>

支持输入且自动完成的 select

支持输入且自动完成的 select
  • lizhihaoweiwei
  • lizhihaoweiwei
  • 2016年04月29日 18:58
  • 283

Ajax实现自动补全

很高兴与你们分享: 希望对需要实现Ajax自动补全的朋友们有帮助! 谢谢!...
  • u011148770
  • u011148770
  • 2015年04月04日 10:58
  • 1302

Jquery和ajax开发案例之---自动补全输入框

案例(浮动窗口 、动态股票信息、弹出菜单、可编辑的表格 、自动补全输入框)下载地址: http://download.csdn.net/detail/zl594389970/7218687...
  • zl594389970
  • zl594389970
  • 2014年04月19日 17:01
  • 2117

简单类似于百度的自动补全功能

http://download.csdn.net/detail/kinbridge/9771261 源码地址
  • kinbridge
  • kinbridge
  • 2017年03月05日 22:40
  • 433

Android开发系列(二十):AutoCompleteTextView(自动完成文本框)的功能和用法

当用户输入一定的字符之后,自动完成文本框能够显示一个下拉菜单,供用户从中选择,当用户选择某个菜单项之后,AutoCompleteTextView可以按照用户的选择自动填写该文本框 AutoCompl...
  • u010800530
  • u010800530
  • 2014年10月26日 17:11
  • 1840

一种模仿AJAX测试数据的方法

在前端编程中,经常需要编写AJAX模拟数据,但应用到生产环境后,又需要修改代码,导致大量的代码都处于调整状态,并且数据都处于静态化状态,以至于视图渲染的效果很差。能不能将模拟数据与业务逻辑完全隔离呢?...
  • yiifaa
  • yiifaa
  • 2016年11月27日 11:11
  • 1606

模拟实现printf函数

在学习C语言的时候,使用最多的就是printf函数了,常常用,却没有认真的思考过printf函数是如何实现的。 查了查msdc后,有了点心得,连忙记录下来。 呈上msdn上printf函数的主要相关信...
  • qq_35524916
  • qq_35524916
  • 2016年11月10日 09:34
  • 672

华为2017校招题:自动售货系统

描述:考生需要模拟实现一个简单的自动售货系统,实现投币、购买商品、退币、输出库存商品及存钱盒信息的功能. 1. 系统中存在以下商品与钱币: 三种商品:每种商品包含商品名称、单价、数量三种属性,分别...
  • Mr_sunrise
  • Mr_sunrise
  • 2017年02月08日 15:27
  • 422

AJAX操作03_封装ajax.js模拟用户登录

本文分享一下ajax方法的封装和利用ajax.js模拟用户登录 1.ajax方法的封装 从此文http://blog.csdn.net/weixin_36185028/article/details/...
  • weixin_36185028
  • weixin_36185028
  • 2017年01月02日 23:11
  • 588

Redis实现自动输入完成

1. 介绍 当我们在京东商城的搜索框,输入想要搜索的内容,比如你想要搜索"热水瓶",刚输入一个"热"字,就会出现一个下拉框,列出了很多以"热"字开头的可供选择的条目,比如"热水器"、"热水袋"、...
  • qwbtc
  • qwbtc
  • 2016年07月23日 11:59
  • 674
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用AJAX实现google输入自动完成的简单模拟
举报原因:
原因补充:

(最多只允许输入30个字)