AutoComplete控件(转)
在线智能输入建议是目前网站上一个非常流行的功能,该功能能够根据用户的输入显示一个在线提示列表。因此,用户只要输入部分关键字,就能够从在线提示列表中选择所需要的关键字。典型的效果如图2.8所示。
图2.8 在线智能输入建议效果图
如果使用ASP.NET和JavaScript技术实现在线智能输入建议这一功能,是非常复杂且比较烦琐的事情。ASP.NET AJAX Control Toolkit中的AutoComplete控件能够实现在线智能输入建议的功能。声明AutoComplete扩展器控件的语法类似如下:
<ajaxToolkit:AutoCompleteExtender
runat="server" ID="ace"
TargetControlID="TextBox控件"
ServiceMethod="获取建议的方法的名称"
ServicePath="获取建议的Web服务"
MinimumPrefixLength="2"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="20"
CompletionListCssClass="提示列表的样式"
CompletionListItemCssClass="未选择项的样式"
CompletionListHighlightedItemCssClass="选择项的样式"
DelimiterCharacters=";, :">
<Animations>
<OnShow> ... </OnShow>
<OnHide> ... </OnHide>
</Animations>
</ajaxToolkit:AutoCompleteExtender>
另外,AutoComplete控件包含多个常用属性,如TargetControlID、MinimumPrefixLength、ServiceMethod、ServicePath、ContextKey等。具体说明如表2.5所示。
表2.5 AutoComplete控件的常用属性及其说明
属 性 软件开发网 www.mscto.com |
说 明 软件开发网 www.mscto.com |
TargetControlID |
使用该控件的ASP.NET服务器端控件的ID值 |
MinimumPrefixLength |
获取建议文本的最小字符数量 |
CompletionInterval |
获取建议文本之前等待的时间 |
EnableCaching |
是否使用缓存 |
CompletionSetCount |
建议文本的数量 |
CompletionListCssClass |
建议列表的样式 |
CompletionListItemCssClass |
未被选择的每一项建议文本的样式 |
CompletionListHighlightedItemCssClass |
被选择的建议文本的样式 |
DelimiterCharacters |
分隔字符集合 |
FirstRowSelected 软件开发网 www.mscto.com |
指定建议文本中的第一项是否被选择 |
Animations |
建议文本的动画 |
OnShow |
显示建议文本时的动画 |
OnHide |
隐藏建议文本时的动画 |
ServiceMethod |
Web服务方法的名称 |
ServicePath |
Web服务的路径(相对路径) |
ContextKey |
设置Web服务方法的prefixText参数的值 |
UseContextKey |
指定是否使用ContextKey参数 |
MinimumPrefixLength属性指定一个整数值,当用户输入内容的长度大于或等于该值时,AutoComplete控件将为输入框显示在线提示列表。CompletionInterval属性设置显示在线提示列表之前等待的时间。CompletionSetCount属性指定在线提示列表一次返回建议的最大数量。
ServicePath属性指定获取在线建议的Web服务;ServiceMethod属性指定获取在线建议的Web服务中方法的名称,该方法必须满足以下代码实例中的签名。
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count)
{
...
}
ServiceMethod属性指定的方法必须满足以下3个条件:
— 参数列表必须为“string prefixText,int count”。其中,prefixText参数的值等于ContextKey属性的值,count参数的值等于CompletionSetCount属性的值。
— 方法的返回类型必须为“string[]”,且使用“public”修饰。
— 必须为方法添加“System.Web.Script.Services.ScriptMethod”属性,使得脚本能够调用该方法。
注意:ServiceMethod属性指定的方法的名称可以随意命名,没有硬性规定。
下述实例代码创建了一个名称为AjaxService的Web服务,并在该Web服务中引入了4个新的命名空间:System.Data、System.Web.Script.Services、AjaxControlToolkit和System.IO。AjaxService Web服务定义了一个类型为string[]的静态变量autoCompleteTextList,它用来保存在线建议的内容。定义AjaxService Web服务的程序代码如下。
///引入新的命名空间
using System.Data;
using System.Web.Script.Services;
using AjaxControlToolkit;
using System.IO;
[System.Web.Script.Services.ScriptService()] ///添加脚本服务
public class AjaxService:System.Web.Services.WebService
{
public static string[] autoCompleteTextList = null;
public AjaxService(){}
……
}
在下述程序代码中,AjaxService Web服务定义了一个名称为GetTextList的Web方法,该方法从data.txt文件(存放在AjaxTextInput应用程序的根目录下)中获取在线建议。具体实现步骤如下:
判断prefixText和count参数是否合法。如果不合法,则中止方法。
如果autoCompleteTextList变量的值为空,则从data.txt文件中获取数据。其中,按行方式读取data.txt文件,并保存到临时数组tempTextList中,并且对tempTextList数组进行排序。最后将排序好的内容设置为autoCompleteTextList变量的值。
使用二叉树搜索法在autoCompleteTextList变量中搜索prefixText参数的值所在位置,并保存搜索的索引。
如果未搜索到prefixText参数的值,则把索引设置为0。
根据索引和count参数的值获取在线建议内容,并复制到matchResultList数组中。
返回matchResultList数组,该数组的内容就是在线建议列表中的内容。
[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public string[] GetTextList(string prefixText,int count)
{ ///检测参数是否为空
if(string.IsNullOrEmpty(prefixText) == true || count <= 0) return null;
if(autoCompleteTextList == null)
{ ///获取data.txt文件的数据
StreamReader reader = new StreamReader(Server.MapPath("data.txt"));
///按行方式读取data.txt文件的数据
ArrayList list = new ArrayList();
string rowString = reader.ReadLine();
while(rowString != null)
{ ///读取一行
list.Add(rowString);
rowString = reader.ReadLine();
}
reader.Close();
///将获取的内容保存到临时数组中
string[] tempTextList = new string[list.Count];
int i = 0;
foreach(string s in list){tempTextList[i++] = s;}
///对数组进行排序
Array.Sort(tempTextList,new CaseInsensitiveComparer());
autoCompleteTextList = tempTextList;
}
///定位二叉树搜索的起点
int index = Array.BinarySearch(autoCompleteTextList,prefixText, 软件开发网 www.mscto.com
new CaseInsensitiveComparer());
if(index < 0)
{ ///修正起点
index = ~index;
}
///搜索符合条件的数据
int matchCount = 0;
for(matchCount = 0; matchCount < count
&& matchCount + index < autoCompleteTextList.Length;
matchCount++)
{ ///查看开头字符串相同的项
if(autoCompleteTextList[index + matchCount].StartsWith(prefixText,
StringComparison.CurrentCultureIgnoreCase) == false)
{break;}
}
///处理搜索结果
string[] matchResultList = new string[matchCount];
if(matchCount > 0)
{ ///复制搜索结果
Array.Copy(autoCompleteTextList,index,matchResultList,0,
matchCount);
}
return matchResultList;
}
另外,UseContextKey属性表示是否使用ContextKey属性的值。如果不使用,则需要把UseContextKey属性的值设置为false。
在下述代码实例中,AutoSuggest.aspx页面演示了为TextBox控件(ID属性的值为tbInput)添加在线智能输入建议的功能。AutoCompleteExtender控件的ID值为aceInput,该控件为tbInput控件添加在线建议。ServicePath属性的值为AjaxService.asmx,ServiceMethod属性的值为上述代码实例中创建的GetTextList方法。
<!-- AjaxTextInput/AutoSuggest.aspx页面 -->
<%@ Page Language="C#" StylesheetTheme="ASPNETAjaxWeb" %>
<head runat="server"><title>在线智能输入建议</title></head>
<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager><br />
<asp:TextBox ID="tbInput" runat="server" SkinID="tbSkin"
Width="300px"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="aceInput" runat="server"
MinimumPrefixLength="1" ServicePath="AjaxService.asmx"
ServiceMethod="GetTextList"
TargetControlID="tbInput"></ajaxToolkit:AutoCompleteExtender>
上述代码实例执行之后,在输入框中输入字符“A”,此时将显示在线建议列表,如图2.9所示。 软件开发网 www.mscto.com
图2.9 演示在线智能输入建议的功能