代码改变世界

出于对Atlas自带AutoCompleteBehavior的不满,自定义了一个支持模版的AutoCompleteBehavior

2006-10-20 03:05 by Jeffrey Zhao, ... 阅读, ... 评论, 收藏, 编辑
  Atlas自带的AutoCompleteBehavior实在不够用。

AutoCompleteBehavior给我的唯一“惊喜”,也就是在一开始,让我忽然觉得,能够这么轻松地为一个文本框添加一个自动完成的能力。但是在一开始的激动过后,我也就仔细地想,这个控件真的好用么?第一个让人感到“震撼”的自动补全应用,应该就是Google Suggest了(如下图)。使用AutoCompleteBehavior能够做到这样的应用吗?


当然不行。AutoCompleteBehavior只能作出最简单的提示,其它什么功能也没有。无法设置样式,无法自定义信息,这就是我们想要的功能吗?这就是所谓的“桌面级”体验吗?很显然,这远远不够。豪不夸张地说,我是怀着对于AutoCompleteBehavior的强烈不满(其实这是前几天我在向别人介绍Atlas时被人Challenge的结果),决定自定义一个加强的AutoCompleteBehavior,不过其实唯一的增强也就是提供了用户自定义模版的能力。还好,有了Atlas的AutoCompleteBehavior作为参考,做一些扩展不难。

埋头做了几个小时,差不多完成了,也就发不出来,就当一个参考吧。

我定义了Jeffz.UI.AutoCompleteBehavior,大约一半代码与Sys.UI.AutoCompleteBehavior相同。另外在它的基础上增加了以下属性:

1、itemTemplate,Sys.UI.ITemplate,自定义每个Item的Template。
2、completionListCssClass,String,自动补全框的class。
3、itemCssClass,String,正常情况下每个Item的class。
4、highlightedItemCssClass,String,高亮的每个Item的class。
5、textProperty,String,决定补全内容的Property。

这里可能值得提一下最后一个属性textProperty。Jeffz.UI.AutoCompleteBehavior请求的Web Services方法的返回并不是保存所有文本的数组,而是一个对象数组,每一个对象有数个属性,在使用时可以将某个属性与模版中的某个控件进行了绑定。而textProperty指定的属性就是最后被用于文本框内文本的属性。

在测试时发现,如果和Atlas的其余控件一样(比如ListView),不及时销毁Template实例化之后生成的对象,内存占用量会比较大,毕竟AutoCompleteBehavior会大量生成对象。不过经过优化后的Jeffz.UI.AutoCompleteBehavior内存占用与Sys.UI.AutoCompleteBehavior相比,没有很明显的增加。

不过,Jeffz.UI.AutoCompleteBehavior还是有些不能自定义的地方,例如CompletionList的边框和宽度,如果完全使用用户定义的CssClass来设置宽度,在IE下没有任何问题的应用,在FireFox下会没有理由地慢慢变宽,这令我百思不得其解,似乎让我对于Sys.UI.AutoCompleteBehavior那么多限制有了一丝理解。因此最后,对于CompelitionList,Jeffz.UI.AutoCompleteBehavior强制使它与文本框同宽,边框为1px。别的地方似乎一时没有发现什么问题,对于不同浏览器的兼容程度也比较让人满意。

似乎说得再多,不如看两个例子,我模仿Google Suggest和Windows Live Mail的Email提示,制作了两个示例:

一、Search Suggest(模仿Google Suggest)

这个例子的样式完全模拟了Google Suggest。

首先是HTML,在这个网页中,只存在一个id为searchTextBox的文本框。代码如下:
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<input id="searchTextBox" type="text" style="width:300px;"/>

然后提供一个div作为AutoCompleteBehavior的Completion List(可选,如果不提供,AutoCompleteBehavior会自己创建一个),并且创建一个div作为提示每一项的模版。代码如下:
<div id="itemTemplate" style="padding:3px; clear:both; height:13px;">
    
<div id="lblKeyword" class="keyword" style="float:left; width:200px; overflow:hidden;"></div>
    
<div style="font-size:10px; float:right;" class="result">
        
<span id="lblResult"></span>
        
<span>&nbsp;results</span>
    
</div>
</div>

可以看到,在这里,我使用了大量内嵌的style,这不是一个好的Practice,不过我在这里是为了使用最简的方法来为模版中“不变”的样式设值。在这里可以看到,在每一项内部,有一个<div />浮动在最左,用于显示提示用自动补全的词,还有一个<div />浮动在最右,用来显示结果数量。

然后就是我们使用的Style:
<style type="text/css">
    body, input 
{ font-family:Arial; font-size:12px; }
    .completionListClass 
{ border: solid 1px #CCCCCC; cursor:default; }
    .itemClass 
{ background-color:white; }
    .itemClass .keyword 
{ color:black; }
    .itemClass .result 
{ color:green; }
    .highlightedItemClass 
{ background-color:blue; }
    .highlightedItemClass .keyword 
{ color:white; }
    .highlightedItemClass .result 
{ color:white; }
</style>

可以看到,我们使用了嵌套的CSS Class,例如,定义了模版某一项的CSS Class为itemClass,那么class被设为result的span,其color值就会被设成green。

最后就是最重要的Atlas Xml Scripts:
Atlas Xml Scripts

在这里,我们将itemTemplate的layoutElement设为itemTemplate,并将Keyword值绑定到lblKeyword的text,还有将Result的值绑定到lblResult的text上。请注意,我们将textProperty设为Keyword,表示将Keyword的值作为最后填充文本框的内容。

自然,我们还有所需要的Web Services方法,自然还包括所需的类:
GetSearchWords方法和SearchResult

和官方的例子相似,从一个文本文件中读出所有的提示信息,一行一个。在这里,我们会另外给一个随机的整数作为Result值。在获得prefixText后,我们将搜索Keyword相应的SearchResult,并且按照Result值排序后输出。我们可以想象出这里每一个数据对象的样子,也能想象出最后绑定后的结果。

既然这样,我们来看一下效果吧:


看上去还不错吧。:)



二、E-mail Suggest(模仿Windows Live Mail的E-mail提示)

在这里,我演示一下使用了Jeffz.UI.AutoCompleteBehavior,可以将自动补全变得多么的灵活。由于现在自动填充的文本,和显示在模版里的内容已经完全分离了,因此我们能将任何样式的内容显示在页面上,甚至直接是HTML。在这个例子中,我们就会直接将HTML写到模版中。我们来看一下:

首先是HTML:
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<input id="searchTextBox" type="text" style="width:300px;"/>

接着是completionList和itemTemplate:
<div id="completionList"></div>

<div id="itemTemplate" style="padding:2px;">
    
<span id="lblEncodedEmail"></span>
</div>

Style:
<style type="text/css">
    body, input 
{ font-family: Verdana; font-size: 12px; }
    .completionListClass 
{ border: solid 1px #CCCCCC; cursor: default; }
    .itemClass 
{ background-color: white; }
    .highlightedItemClass 
{ background-color: #d2eaf6; }
</style>

Atlas Xml Scripts:
Atlas Xml Scripts

和刚才的例子基本相同,只是我们在这里将EncodedEmailSuggest(HTML编码后用于显示的信息)绑定在lblEncodedEmail的text属性上时,需要将该label的htmlEncode属性设为false。这样,text属性就会被设在innerHTML上,这样就达到了我们需要的效果。另外textProperty的值为“Email”。

接下来就是我们需要的Web Services方法和所需要的EmailSuggest类:
GetEmailSuggest方法和EmailSuggest类

我们查找相关的Email(只要有任意部分字符串与prefixText相同即可),然后将EmailSuggest对象的Email属性设为该Email的原始值(作为填充文本框的内容),再将Email进行HtmlEncode后,将相关的部分使用“<b></b>”进行包裹,这样就组成了最终用来显示的HTML值。我们直接将其显示在模版中,就是我们最终需要的结果。

我们还是来看一下使用效果吧:


可能不太好看,但是效果还是达到了。


有了自定义模版的功能,剩下的只需要发挥想象力即可。现在我们的AutoCompleteBehavior更加实用了:)



点击这里下载Jeffz.UI.AutoCompleteBehavior源文件以及示例源文件。
点击这里查看Search Suggest使用效果。
点击这里查看E-mail Suggest使用效果。

使用Live Messenger联系我