使用AutoComplete Extender实现自动完成功能

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

摘要：自动完成功能在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文件夹：．编写Web Service用来提供单词列表，这里我们并不关心具体的实现逻辑，只关心Web Method接收什么样的参数，最后返回一个string数组即可。

 

单词库 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

．添加AutoComplete Extender，首先需要添加一个ScriptManager，再添加一个服务器端的控件和一个AutoComplete Extender，并设置相关的参数，代码如下：

 

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

<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>

 

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