Atlas学习手记(25):使用行为增强用户界面(五):AutoComplete Behavior

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

 

主要内容

1AutoComplete 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):

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

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

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

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

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

6completionSetCount:提示列表中的最大项目数,默认值为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

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

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2006-09-02 10:19 TerryLee 阅读(3125) 评论(18)  编辑 收藏 网摘 所属分类: [08]  Web开发

  回复  引用  查看    
#1楼 2006-09-02 19:25 | 狂风      
强烈支持,正在学习中...
  回复  引用  查看    
#2楼 [楼主]2006-09-04 08:12 | TerryLee      
@狂风
谢谢:-)
  回复  引用  查看    
#3楼 2006-09-04 14:35 | wdhSoft[匿名]      
我用Ajax实现过这个功能,真的很不错。
  回复  引用  查看    
#4楼 [楼主]2006-09-05 17:32 | TerryLee      
@wdhSoft[匿名]
是啊
不过用Ajax来实现比较麻烦一些,不如Atlas这样简单
  回复  引用    
#5楼 2006-09-06 11:45 | ts [未注册用户]
问一个问题,可以使支持asp.net的服务器空间支持atlas?
  回复  引用  查看    
#6楼 [楼主]2006-09-06 17:04 | TerryLee      
@ts
只要支持.NET2.0就可以
  回复  引用    
#7楼 2006-09-08 02:28 | 正树 [未注册用户]
Atlas的精华之处果然是令人回味的
  回复  引用  查看    
#8楼 [楼主]2006-09-08 08:27 | TerryLee      
@正树
呵呵,是啊

还有好多值得我们去学习
  回复  引用    
#9楼 2006-09-09 04:30 | 正树 [未注册用户]
如果使用母版页的话
那这段Behavior的脚本应该放在哪里才能够执行呢
不然总是提示说找不到那个TargetID.
  回复  引用    
#10楼 2006-09-09 16:12 | 111[匿名] [未注册用户]
怎么不支持中文啊?我该怎么做呢?
  回复  引用    
#11楼 2006-09-09 17:19 | wuyansheng [未注册用户]
1.准备相关的数据源,这里使用一个本文文件作为我们的数据源,当然你也可以从数据库中读数据,拷贝如下单词为words.txt并保存在App_Data文件夹:
请教一下怎么才可以实现根据输入数据从数据库里读出数据呢?
谢谢!


  回复  引用    
#12楼 2006-09-11 17:30 | 111[匿名] [未注册用户]
怎样才能支持中文啊?
  回复  引用  查看    
#13楼 [楼主]2006-09-12 08:48 | TerryLee      
@111[匿名]
string[] temp = File .ReadAllLines(Server.MapPath("~/App_Data/words.txt"),System.Text.Encoding .GetEncoding ("gb2312"));

试试这个
  回复  引用  查看    
#14楼 [楼主]2006-09-12 08:49 | TerryLee      
@wuyansheng
从数据库中读取的例子:
http://www.codeproject.com/useritems/Autocomplete.asp
  回复  引用    
#15楼 2006-09-12 09:25 | 111[匿名] [未注册用户]
怎样让从数据库读取的信息支持中文啊?我发现使用服务器端控件时支持中文,但使用客户端控件时却不支持,不知为什么?
  回复  引用    
#16楼 2006-09-12 10:05 | killuakun [未注册用户]
我也有中文支持的问题,输出没问题,但输入到服务后是乱码,于是没有正确响应
  回复  引用    
#17楼 2007-01-17 00:34 | snyod [未注册用户]
代表党(.NET平台)感谢您.
全部收藏.............
  回复  引用    
#18楼 2007-05-21 21:25 | sohbet [未注册用户]
ddddd d d dd d




标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索

相关文章:

相关链接: