Atlas学习手记（25）：使用行为增强用户界面（五）：AutoComplete Behavior

前面说过使用服务端的AutoComplete Extender，本文看一下如何使用AutoComplete Behavior来实现自动完成功能。

 

主要内容

1．AutoComplete Behavior简介

2．完整示例

 

一．AutoComplete Behavior简介

前面说过使用服务端的AutoComplete Extender，本文看一下如何使用AutoComplete Behavior来实现自动完成功能。AutoComplete Behavior完全使用客户端脚本实现，它的基本定义形式如下：

<textBox>

    <behaviors>

        <autoComplete

            completionInterval="1000|interval between drop-down updates"

            completionList="HTML element used for drop-down box"

            completionSetCount="10|number of values shown in drop-down list"

            dataContext="source for data binding operations"

            id="identifier for looking up the component by name"

            minimumPrefixLength="3|minimum prefix length"

            propertyChanged="event handler"

            serviceMethod="name of auto completion Web service method"

            serviceURL="URL of auto completion Web service"

        >

            <bindings>

                <!-- bindings -->

            </bindings>

            <propertyChanged>

                <!-- actions -->

            </propertyChanged>

        </autoComplete>

    </behaviors>

</textBox>

其中它的属性解释如下（Dflying Chen）：

1．serviceURL：提供自动完成功能的服务器端Web Service的路径。

2．serviceMethod：提供自动完成功能的服务器端的Web Method名称，该Web Method应该有类似的签名：public String[] GetSuggestions(string prefixText, int count)。其中prefixText为客户端传入的当前输入的字符串，count为返回的提示列表中的最大条目数，同时它应该返回一个string数组，表示提示列表。

3．minimumPrefixLength：开始提供自动完成列表的文本框内最少的输入字符数量。默认值为3。如果用户刚刚输入一两个字母，您就迫不及待的提供给他一长串的列表，这既没什么意义，也会极大浪费服务器与网络资源。只有用户输入了等于或超过某个数目（由本属性设定）时，给出的建议才是有价值的，Atlas也才会查询服务器端的相应方法并显示给用户提示列表。

4．completionInterval：每次查询后台的间隔时间，默认值是1000（毫秒）。如果该值太大，则给用户带来程序反应迟钝的印象，如果太小，则加重服务器与网络负担。一般来讲，500-2000是一个比较合理的值。

5．completionList：显示提示列表的DOM元素。如果不指定，Atlas会自动在相关的TextBox下面创建一个DIV来显示。一般情况下我们无须指定这个属性。

6．completionSetCount：提示列表中的最大项目数，默认值为10。

二．完整示例

下面看一个完整的示例，前面的两步跟AutoComplete Extender是一样的，也需要准备相关的数据和编写WebService。

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．添加相关的HTML控件，这里用两个，我们分别演示默认的方式和自定义Drop-Down的方式：

<div>

<h3>AutoComplete Behavior Example</h3>

默认的方式<br />

<input id="textBox1" type="text" style="width: 300px;" /><br /><br />

自定义Drop-Down<br />

<input id="textBox2" type="text" style="width: 300px;" />

</div>

<div id="list" style="opacity:0.8;filter:alpha(opacity=75); font-size:10pt; font-family:宋体">

</div>

4．编写Atlas脚本，添加两个AutoComplete Behavior，第一个不需要指定completionList，而第二个指定completionList：

<script type="text/xml-script">

    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

       <components>

           <textBox id="textBox1">

               <behaviors>

                   <autoComplete 

                      serviceURL="AutoCompleteService.asmx"

                      serviceMethod="GetWordList"

                      minimumPrefixLength="2"

                      completionSetCount="10"

                      completionInterval="500" />

               </behaviors>

           </textBox>

           <textBox id="textBox2">

               <behaviors>

                   <autoComplete 

                      serviceURL="AutoCompleteService.asmx"

                      serviceMethod="GetWordList"

                      minimumPrefixLength="2"

                      completionSetCount="10"

                      completionList="list"

                      completionInterval="500" />

               </behaviors>

           </textBox>

       </components>

    </page>

</script>

编译运行后效果如下：

默认方式

自定义Drop-Down

完整示例下载：https://files.cnblogs.com/Terrylee/AutoCompleteBehaviorDemo.rar