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

完整示例下载

posted on 2008-03-25 11:28  秋天  阅读(314)  评论(0编辑  收藏  举报

导航