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文件夹：

单词库

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

完整示例下载