十、AutoComplete——自动完成

AutoComplete自动完成，当用户输入字符后，会自动匹配出可能的结果供用户选择，google或百度的输入框就有这种功能。

 

举例如下：

1.       拖入一个ScriptManage控件

2.       拖入一个TextBox控件

3.       拖入一个AutoComplete控件：

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"

                                  TargetControlID="TextBox1"    //必须、使用自动完成功能的TextBox控件Id

                                  ServicePath="AutoComplete.asmx"    //必须、要调用的web服务

                                  ServiceMethod="getUserList"    //必须、要调用的web服务中的方法

                                  CompletionSetCount="6"    //返回的数据行

                                  MinimumPrefixLength="0"    //输入多少个字符就开始调用web服务

                                  CompletionInterval="1000"    //每隔多长时间调用一次web服务，单位为毫秒

                                  CompletionListCssClass="autocomplete_completionListElement"    //下拉框样式

                                  CompletionListItemCssClass="autocomplete_listItem"    //下拉框元素样式

                                  CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"    //鼠标所在下拉框元素样式

                                 >

        </cc1:AutoCompleteExtender>

4.       编写web服务

<%@ WebService Language="C#" Class="AjaxToolkit.AutoComplete" %>

using System;

using System.Collections;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

 

namespace AjaxToolkit

{

    /// <summary>

    ///AutoComplete 的摘要说明

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

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

    [System.Web.Script.Services.ScriptService]

    public class AutoComplete : System.Web.Services.WebService

    {

        public AutoComplete()

        {

            //如果使用设计的组件，请取消注释以下行

            //InitializeComponent();

        }

 

        [WebMethod]

        public string[] getUserList(string prefixText, int count) //注意此处的参数名和类型必须原封不动否则无法响应

        {

            count = 100;

            string[] strs = new string[count];

            for (int i = 0; i < count; i++)

            {

                strs[i] = prefixText + "_" + i.ToString();

            }

           

            return strs;

        }

    }

}

5.       css样式：

.autocomplete_completionListElement

 {

    margin : 0px!important;

    background-color : inherit;

    color : windowtext;

    border : buttonshadow;

    border-width : 1px;

    border-style : solid;

    cursor : 'default';

    overflow : auto;

    height :auto;

    max-height:200px;

    text-align : left;

    list-style-type : none;

}

  

.autocomplete_listItem

{

    border-style : solid;

    border :#EAEFF9;

    border-width : 1px;

    background-color : window;

    color : windowtext;

}

 

.autocomplete_highlightedListItem

{

    background-color: #ffff99;

    color: black;

    padding: 1px;

}

6.       截图如下