十、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.?????? 截图如下