AJAX实现百度谷歌搜索自动填充

最新推荐文章于 2022-03-10 11:20:52 发布

原创最新推荐文章于 2022-03-10 11:20:52 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #百度 #webservice #textbox #服务器 #server

【Web】同时被 2 个专栏收录

11 篇文章

订阅专栏

Web开发

9 篇文章

订阅专栏

本文介绍如何利用AJAX技术实现类似百度谷歌的搜索自动填充功能。通过一个文本框接收用户输入，结合AutoCompleteExtender控件及Webservice文件处理数据库查询，实现了输入时的动态提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇博客做一个用AJAX实现百度谷歌搜索自动填充。大家在上网搜索资料的时候，搜索引擎都为我们显示出了人性化的自动提示功能，满足用户需求的同时也极大的方便了客户的操作，可谓是一箭双雕。现在的AJAX这种客户端和服务器交互式的编程技术可以说是应用及其的广泛，几乎大家每天上午都在和AJAX打交道。它让web应用程序显示出了C/S诸多好处，AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），客户端与服务器进行交互在不需要全部更新整个页面的时候基本都使的是AJAX技术。

下面我们具体的说说百度谷歌是怎样自动填充的。它主要使用的有：

1. 一个文本框，用来输入数据

2. AJAX Tool Kit中的一个控件AutoCompleteExtender，用来让文本框和数据源建立关系（AJAX Tool Kit需要大家去网上下载，将下载下来的dll文件添加到VS当中）

3. 一个用于获取数据库数据的文件，这个文件的类型没有限制，可以是Webservice（.asmx）和WCF（.svc）和一般处理程序（.ashx）文件，或者普通的C#类文件和文本文件也可以。我们在例子当中使用的是webservice

下面我们开始这个例子的制作过程：

一、建立部门的数据库，并在部门表（TDepartment）中添加数据

二、在aspx页面中添加控件（TextBox、ScriptManager、AutoCompleteExtender）并设定控件的属性，HTML代码如下所示：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
            TargetControlID="TextBox1"
            MinimumPrefixLength="1"
             ServiceMethod="GetDeptName"
             ServicePath="WebService1.asmx">
        </cc1:AutoCompleteExtender>

AutoCompleteExtender控件的属性：
　　　１．TargetControlID：指定将被辅助完成自动输入的控件ID，这里的控件只能是TextBox；
　　　２．ServicePath：指出提供服务的WEB服务路径，若不指出则ServiceMethod表示本页面对应的方法名；
　　　３．ServiceMethod：指出提供服务的方法名；
　　　４．MinimumPrefixLength：指出开始提供提示服务时，TextBox控件应有的最小字符数，默认为3；
　　　５．CompletionSetCount：显示的条数，默认为10；
　　　６．EnableCaching：是否在客户端缓存数据，默认为true；
　　　７．CompletionInterval：从服务器读取数据的时间间隔，默认为1000，单位：毫秒。

三、WebService1.asmx文件中函数GetDeptName的添加：

[WebMethod]
        public static string[] GetDeptName(stringprefixText)
        {
            List<string> suggestions = newList<string>();
            try
            {
 
                SqlConnectioncon = new SqlConnection("server=.;Initial Catalog=department;UserID=sa;Password=123456");
                SqlCommandcmd = new SqlCommand();
                //模糊查询使用“%”
                cmd.CommandText = "SELECT depName FROM TDepartment where depName like'" + prefixText + "%'";
                cmd.Connection = con;
                con.Open();
                SqlDataReadersdr = null;
                sdr = cmd.ExecuteReader();
                while(sdr.Read())
                {
                   suggestions.Add(sdr.GetSqlString(0).Value);
                }
 
                returnsuggestions.ToArray();
            }
 
            catch(System.Exception ex)
            {
                suggestions.Add(ex.Message);
                returnsuggestions.ToArray();
            }
 
 
        }

到此为止我们的工作都已经完成了，效果拭目以待，大家试试看吧！