Ajax 模仿百度，google查询是模糊下拉 webservice

 

首现，做准备工作。建立一个WebService，这里面的代码如下：

[WebMethod]
        public string[] GetString(string prefixText,int count)
        {
            System.Collections.Generic.List<string> list = new System.Collections.Generic.List<string>(count);
            System.Data.DataSet ds = new System.Data.DataSet();
            //这里是我在数据库中取数据的代码 其中SqlHelper类是项目中的取数据基类
            string strSql = string.Format("select top {0} tId,tJf from Table20100728 where tJf like '{1}%' order by tJf", count, prefixText);
            ds = SqlHelper.ExecuteDataSet(strSql);
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                list.Add(ds.Tables[0].Rows[i]["tJf"].ToString());
            }
            //for (int i = 0; i < count; i++)
            //{
            //list.Add(prefixText+i.ToString());
            //}
            return list.ToArray();
        }

记得引用命名空间：using System.Collections.Generic;

参数说明：

prefixText ：用来作为模糊条件的关键字

count：指示文本框下拉显示几条数据

其中

// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]

取消注释，否则无法调用

然后建立web页面 拖一个ScriptManager 和一个 文本框 进来

给文本框添加ajax扩展 AutoCompleteExtender

下面简单介绍下AutoCompleteExtender的属性

a,TargetControlID 这个属性是所有AjaxControlToolkit的共同属性,就是扩展目标控件ID(textbox的id)
b.CompletionSetCount 这个属性是设置显示下拉结果的条数 默认为10吧
c.MinimumPrefixTextLength 这个属性是设置输入几个字符的长度后调用webService中的方法显示下拉列表 d.ServicePath 这个属性设置需要调用的web Service路径
e.ServiceMethod 这个属性设置需要调用的web Service中的方法(函数)
f.EnableCaching：是否在客户端缓存数据,默认为true
g.CompletionInterval：从服务器读取数据的时间间隔,默认为1000,单位：毫秒 （建议设置为10）

下面给出的是 aspx页面代码

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" MinimumPrefixLength="1"
            DelimiterCharacters="" Enabled="True" ServiceMethod="GetString" ServicePath="WebService1.asmx"
            TargetControlID="TextBox1" CompletionInterval="10">
        </cc1:AutoCompleteExtender>
        <cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" MinimumPrefixLength="2"
            DelimiterCharacters="" Enabled="True" ServiceMethod="GetString" ServicePath="WebService1.asmx"
            TargetControlID="TextBox1" CompletionInterval="10">
        </cc1:AutoCompleteExtender>

黄色部分可有可无，如果你只关心第一个字符那么黄色部分就不用了，如果你想达到2级效果就把黄色部分加上，3级效果的 以此类推，请模仿黄色部分。