Atlas学习手记（4）：使用AutoComplete Extender实现自动完成功能

转自 TerryLee技术空间
摘要：自动完成功能在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来说，它具有如下属性：

属性	描述
ServicePath	指定自动完成功能Web Service的路径 ServicePath="AutoCompleteService.asmx"
ServiceMethod	指定自动完成功能Web Method的名称 ServiceMethod="GetWordList"
DropDownPanelID	指定显示列表的Panel的ID，一般情况会提供一个默认的，我们无需指定
minimumprefixlength	开始提供自动完成列表的文本框内最少的输入字符数量。 minimumprefixlength="1"

我们需要为AutoComplete Extender控件指定一个AutoCompleteProperties子控件，它同样具有如下属性：

属性	描述
ServicePath	同AutoComplete Extender的ServicePath
ServiceMethod	同AutoComplete Extender的ServiceMethod
minimumprefixlength	同AutoComplete Extender的minimumprefixlength
Enabled	是否开启自动完成功能，默认值为false Enabled="True"
TargetControlID	指定自动完成功能应用到哪个TextBox上，设置Web服务器TextBox控件的ID TargetControlID="TextBox1"

下面通过一个例子来看一下具体如何使用，来自于Atlas的官方网站。

二．一个完整的示例

1．准备相关的数据源，这里使用一个本文文件作为我们的数据源，当然你也可以从数据库中读数据，拷贝如下单词为words.txt并保存在App_Data文件夹：

单词库
access control list (ACL)

ADO.NET

aggregate event

alpha channel

anchoring

antialiasing

application base

application domain (AppDomain)

application manifest

application state

ASP.NET

ASP.NET application services database

ASP.NET mobile controls

ASP.NET mobile Web Forms

ASP.NET page

ASP.NET server control

ASP.NET Web application

assembly

assembly cache

assembly manifest

assembly metadata

assertion (Assert)

association class

ASSOCIATORS OF

asynchronous method

attribute

authentication

authorization

autopostback

bounds

boxing

C#

card

catalog

CCW

chevron

chrome

cHTML

CIM

CIM Object Manager

CIM schema

class

client area

client coordinates

clip

closed generic type

CLR

CLS

CLS-compliant

code access security

code-behind class

code-behind file

code-behind page

COM callable wrapper (CCW)

COM interop

Common Information Model (CIM)

common language runtime

common language runtime host

Common Language Specification (CLS)

common object file format (COFF)

common type system (CTS)

comparison evaluator

composite control

configuration file

connection

connection point

constraint

constructed generic type

constructed type

consumer

container

container control

content page

context

context property

contract

control state

cross-page posting

CTS

custom attribute (Attribute)

custom control

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>

好了，到这里整个步骤就全部完成了，运行后就可以看到效果如下：

完整示例下载：http://terrylee.cnblogs.com/Files/Terrylee/AutoCompleteExtenderDemo.rar