|
|
|
|
摘要:自动完成功能在Ajax时代已经见的很多了,像Google Suggest,很多邮箱中也都有应用。在Atlas对于自动完成功能提供了很好的支持,提供了客户端的AutoComplete Behavior和服务器端的AutoComplete Extender的支持。本文主要看一下使用AutoComplete Extender来实现自动完成功能。 主要内容 1.AutoComplete Extender介绍 2.一个完整的示例 一.AutoComplete Extender介绍 自动完成功能在Ajax时代已经见的很多了,像Google Suggest,很多邮箱中也都有应用,如下图: 在Atlas对于自动完成功能提供了很好的支持,提供了客户端的AutoComplete Behavior和服务器端的AutoComplete Extender的支持。本文主要介绍一下使用AutoComplete Extender来实现自动完成功能。一个简单的AutoComplete Extender如下: <atlas:AutoCompleteExtender runat="server" ![]() ID="autoComplete1">![]() <atlas:AutoCompleteProperties TargetControlID="TextBox1" ![]() Enabled="True" ServicePath="AutoCompleteService.asmx" ![]() ServiceMethod="GetWordList" ![]() minimumprefixlength="1" />![]() </atlas:AutoCompleteExtender>对于AutoComplete Extender来说,它具有如下属性:
我们需要为AutoComplete Extender控件指定一个AutoCompleteProperties子控件,它同样具有如下属性:
下面通过一个例子来看一下具体如何使用,来自于Atlas的官方网站。 二.一个完整的示例 1.准备相关的数据源,这里使用一个本文文件作为我们的数据源,当然你也可以从数据库中读数据,拷贝如下单词为words.txt并保存在App_Data文件夹: 2.编写Web Service用来提供单词列表,这里我们并不关心具体的实现逻辑,只关心Web Method接收什么样的参数,最后返回一个string数组即可。
using System;![]() using System.IO;![]() using System.Web;![]() using System.Collections;![]() using System.Collections.Generic;![]() using System.Threading;![]() using System.Web.Services;![]() using System.Web.Services.Protocols;![]() using System.Xml.Serialization;![]() ![]() ![]() /// <summary>![]() /// Summary description for AutoCompleteService![]() /// </summary>![]() [WebService(Namespace = "http://tempuri.org/")]![]() [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]![]() ![]() public class AutoCompleteService : System.Web.Services.WebService {![]() ![]() public AutoCompleteService () {![]() //Uncomment the following line if using designed components ![]() //InitializeComponent(); ![]() }![]() private static string[] autoCompleteWordList = null;![]() [WebMethod]![]() public String[] GetWordList(string prefixText, int count)![]() ![]() { if (autoCompleteWordList == null)![]() ![]() { string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/words.txt"));![]() Array.Sort(temp, new CaseInsensitiveComparer());![]() autoCompleteWordList = temp; }![]() int index = Array.BinarySearch(autoCompleteWordList, prefixText,![]() new CaseInsensitiveComparer());![]() if (index < 0)![]() ![]() { index = ~index; }![]() int matchingCount;![]() for (matchingCount = 0;![]() matchingCount < count && index + matchingCount <![]() autoCompleteWordList.Length;![]() matchingCount++)![]() ![]() {![]() if (!autoCompleteWordList[index +![]() matchingCount].StartsWith(prefixText,![]() StringComparison.CurrentCultureIgnoreCase))![]() ![]() { break; } }![]() String[] returnValue = new string[matchingCount];![]() if (matchingCount > 0)![]() ![]() { Array.Copy(autoCompleteWordList, index, returnValue, 0,![]() matchingCount); }![]() return returnValue; } }3.添加AutoComplete Extender,首先需要添加一个ScriptManager,再添加一个服务器端的控件和一个AutoComplete Extender,并设置相关的参数,代码如下: <atlas:ScriptManager id="AtlasPage1" runat="server" />![]() <div class="page"id="links">![]() <div id="content">![]() <h2>AutoComplete server control</h2>![]() <asp:TextBox ID="TextBox1" runat="server" Width="220px"></asp:TextBox>![]() <atlas:AutoCompleteExtender runat="server" ![]() ID="autoComplete1">![]() <atlas:AutoCompleteProperties![]() TargetControlID="TextBox1" ![]() Enabled="True" ServicePath="AutoCompleteService.asmx" ![]() ServiceMethod="GetWordList" ![]() minimumprefixlength="1" />![]() </atlas:AutoCompleteExtender> ![]() </div>![]() </div> |








}