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