使用AutoComplete Extender实现自动完成功能

最新推荐文章于 2019-04-19 14:24:06 发布

转载最新推荐文章于 2019-04-19 14:24:06 发布 · 1.2k 阅读

文章标签：

#autocomplete #textbox #webservice #authorization #authentication #behavior

JavaScript/AJAX 专栏收录该内容

54 篇文章

订阅专栏

本文介绍如何使用Atlas中的AutoCompleteExtender实现自动完成功能。通过示例展示了配置AutoCompleteExtender及其属性的方法，包括指定目标TextBox、WebService路径及方法等。

Atlas学习手记（4）：使用AutoComplete Extender实现自动完成功能

摘要：自动完成功能在Ajax时代已经见的很多了，像Google Suggest，很多邮箱中也都有应用。在Atlas对于自动完成功能提供了很好的支持，提供了客户端的AutoComplete Behavior和服务器端的AutoComplete Extender的支持。本文主要看一下使用AutoComplete Extender来实现自动完成功能。

主要内容

1 ．AutoComplete Extender介绍

2 ．一个完整的示例

一．AutoComplete Extender介绍

自动完成功能在Ajax时代已经见的很多了，像Google Suggest，很多邮箱中也都有应用,如下图：

在Atlas对于自动完成功能提供了很好的支持，提供了客户端的AutoComplete Behavior和服务器端的AutoComplete Extender的支持。本文主要介绍一下使用AutoComplete Extender来实现自动完成功能。一个简单的AutoComplete Extender如下：

<atlas:AutoCompleteExtender runat="server" ID="autoComplete1">

<atlas:AutoCompleteProperties TargetControlID="TextBox1"

Enabled="True" ServicePath="AutoCompleteService.asmx"

ServiceMethod="GetWordList"

minimumprefixlength="1" />

</atlas:AutoCompleteExtender>

对于AutoComplete Extender来说，它具有如下属性：

属性	描述
ServicePath	指定自动完成功能Web Service的路径 ServicePath ="AutoCompleteService.asmx"
ServiceMethod	指定自动完成功能Web Method的名称 ServiceMethod ="GetWordList"
DropDownPanelID	指定显示列表的Panel的ID，一般情况会提供一个默认的，我们无需指定
minimumprefixlength	开始提供自动完成列表的文本框内最少的输入字符数量。 minimumprefixlength ="1"

我们需要为AutoComplete Extender控件指定一个AutoCompleteProperties子控件，它同样具有如下属性：

属性	描述
ServicePath	同AutoComplete Extender的ServicePath
ServiceMethod	同AutoComplete Extender的ServiceMethod
minimumprefixlength	同AutoComplete Extender的minimumprefixlength
Enabled	是否开启自动完成功能，默认值为false Enabled ="True"
TargetControlID	指定自动完成功能应用到哪个TextBox上，设置Web服务器TextBox控件的ID TargetControlID ="TextBox1"

下面通过一个例子来看一下具体如何使用，来自于Atlas的官方网站。

二．一个完整的示例

1 ．准备相关的数据源，这里使用一个本文文件作为我们的数据源，当然你也可以从数据库中读数据，拷贝如下单词为words.txt并保存在App_Data文件夹：．编写Web Service用来提供单词列表，这里我们并不关心具体的实现逻辑，只关心Web Method接收什么样的参数，最后返回一个string数组即可。

单词库

．添加 AutoComplete Extender ，首先需要添加一个ScriptManager，再添加一个服务器端的控件和一个AutoComplete Extender，并设置相关的参数，代码如下：

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; }

}

<atlas:ScriptManager id="AtlasPage1" runat="server" />

<h2>AutoComplete server control</h2>

<asp:TextBox ID="TextBox1" runat="server" Width="220px"></asp:TextBox>

<atlas:AutoCompleteExtender runat="server"

ID="autoComplete1">

<atlas:AutoCompleteProperties

TargetControlID="TextBox1"

Enabled="True" ServicePath="AutoCompleteService.asmx"

ServiceMethod="GetWordList"

minimumprefixlength="1" />

</atlas:AutoCompleteExtender>

</div> </div>

好了，到这里整个步骤就全部完成了，运行后就可以看到效果如下：