ajaxToolkit:AutoCompleteExtender 简单用法

ajaxToolkit 是微软官方的一个ajax控件包,  AutoCompleteExtender 就是其中之一. 需要引用ajaxToolkit.dll

达到的效果就是像baidu的输入查询条件带出提示的效果。

前台文本框:
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
这就是一个默认的文本框, 不需要任何多余的设定.  然后定义一个AutoCompleteExtender, 这里我们只设置了最基本的选项, 其它的选项后面我会说明:
<ajaxToolkit:AutoCompleteExtender ID="ac1" runat="server" TargetControlID="txt1" ServicePath="webservice.asmx"  //  这边放的是webservice名字    ServiceMethod="GetTextList" MinimumPrefixLength="1" ></ajaxToolkit:AutoCompleteExtender>
这样 , 前台的工作就完成了。

后台要添加一个webservice服务。

 

namespace AJAXEnabledWebApplication3
{
    /// <summary>
    /// Summary description for AutoComplete
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.Web.Script.Services.ScriptService]
    [ToolboxItem(false)]
    public class AutoComplete : System.Web.Services.WebService
    {
        public static string[] autoCompleteTextList = null;

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public string[] GetTextList(string prefixText, int count)
        {   ///检测参数是否为空
            if (string.IsNullOrEmpty(prefixText) == true || count <= 0) return null;
            if (autoCompleteTextList == null)
            {
                //获取data.txt文件的数据
                StreamReader reader = new StreamReader(Server.MapPath("data.txt"));
                //按行方式读取data.txt文件的数据
                ArrayList list = new ArrayList();
                string rowString = reader.ReadLine();
                while (rowString != null)
                {   ///读取一行
                    list.Add(rowString);
                    rowString = reader.ReadLine();
                }
                reader.Close();
                //将获取的内容保存到临时数组中
                string[] tempTextList = new string[list.Count];
                int i = 0;
                foreach (string s in list)
                {
                    tempTextList[i++] = s;
                }
                //对数组进行排序
                Array.Sort(tempTextList, new CaseInsensitiveComparer());
                autoCompleteTextList = tempTextList;
            }
            //定位二叉树搜索的起点
            int index = Array.BinarySearch(autoCompleteTextList, prefixText, new CaseInsensitiveComparer());
            if (index < 0)
            {
                //修正起点
                index = ~index;
            }
            //搜索符合条件的数据

            int matchCount = 0;
            for (matchCount = 0; matchCount < count && matchCount + index < autoCompleteTextList.Length; matchCount++)
            {
                //查看开头字符串相同的项
                if (autoCompleteTextList[index + matchCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase) == false)
                { break; }
            }

            //处理搜索结果
            string[] matchResultList = new string[matchCount];
            if (matchCount > 0)
            {
                //复制搜索结果
                Array.Copy(autoCompleteTextList, index, matchResultList, 0, matchCount);
            }
            return matchResultList;
        }
    }
}

 

这样就可以浏览效果了