前面说过使用服务端的AutoComplete Extender,本文看一下如何使用AutoComplete Behavior来实现自动完成功能。 主要内容1.AutoComplete Behavior简介2.完整示例 一.AutoComplete Behavior简介前面说过使用服务端的AutoComplete Extender,本文看一下如何使用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文件夹:
单词库
ADO
.NETaggregate 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.
/**//// <summary>
/// Summary description for AutoCompleteService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutoCompleteService : System.Web.Services.WebService
{
//InitializeComponent();
}
private static string[] autoCompleteWordList = null;
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/>
<page ="http://schemas.microsoft.com/">
<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
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:Atlas学习手记(25):使用行为增强用户界面(五):AutoCompleteBehavior
关键词:atlas
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。