你的位置:首页 > 软件开发 > ajax > Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能

Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能

发布时间:2008-10-23 21:32:00
摘要:自动完成功能在Ajax时代已经见的很多了,像Google Suggest,很多邮箱中也都有应用。在Atlas对于自动完成功能提供了很好的支持,提供了客户端的AutoComplete Behavior和服务器端的AutoComplete Extender的支持。本文主要看一下使用AutoComplete Extender来实现自动完成功能。 主要内容1.AutoComplete Exten

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

 

主要内容

1.AutoComplete Extender介绍

2.一个完整的示例

 

一.AutoComplete Extender介绍

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

Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能

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

Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能<atlas:AutoCompleteExtender runat="server" Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能 ID="autoComplete1">Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能   <atlas:AutoCompleteProperties TargetControlID="TextBox1" Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能      Enabled="True" ServicePath="AutoCompleteService.asmx" Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能      ServiceMethod="GetWordList" Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能      minimumprefixlength="1"  />Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能</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文件夹:

Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能单词库Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ADO.NETAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能aggregate eventAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能alpha channelAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能anchoringAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能antialiasingAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能application baseAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能application domain (AppDomain)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能application manifestAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能application stateAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ASP.NETAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ASP.NET application services databaseAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ASP.NET mobile controlsAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ASP.NET mobile Web FormsAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ASP.NET pageAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ASP.NET server controlAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ASP.NET Web applicationAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能assemblyAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能assembly cacheAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能assembly manifestAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能assembly metadataAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能assertion (Assert)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能association classAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能ASSOCIATORS OFAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能asynchronous methodAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能attributeAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能authenticationAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能authorizationAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能autopostbackAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能boundsAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能boxingAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能C#Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能cardAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能catalogAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能CCWAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能chevronAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能chromeAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能cHTMLAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能CIMAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能CIM Object ManagerAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能CIM schemaAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能classAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能client areaAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能client coordinatesAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能clipAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能closed generic typeAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能CLRAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能CLSAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能CLS-compliantAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能code access securityAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能code-behind classAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能code-behind fileAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能code-behind pageAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能COM callable wrapper (CCW)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能COM interopAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Common Information Model (CIM)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能common language runtimeAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能common language runtime hostAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Common Language Specification (CLS)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能common object file format (COFF)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能common type system (CTS)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能comparison evaluatorAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能composite controlAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能configuration fileAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能connectionAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能connection pointAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能constraintAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能constructed generic typeAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能constructed typeAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能consumerAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能containerAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能container controlAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能content pageAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能contextAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能context propertyAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能contractAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能control stateAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能cross-page postingAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能CTSAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能custom attribute (Attribute)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能custom control

2.编写Web Service用来提供单词列表,这里我们并不关心具体的实现逻辑,只关心Web Method接收什么样的参数,最后返回一个string数组即可。

Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System.IO;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System.Web;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System.Collections;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System.Collections.Generic;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System.Threading;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System.Web.Services;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System.Web.Services.Protocols;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能using System.Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能/**//// <summary>Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能/// Summary description for AutoCompleteServiceAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能/// </summary>Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能[WebService(Namespace = "http://tempuri.org/")]Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能public class AutoCompleteService : System.Web.Services.WebService Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能{Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能    public AutoCompleteService () Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能{Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        //Uncomment the following line if using designed components Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        //InitializeComponent(); Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能    }Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能    private static string[] autoCompleteWordList = null;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能    [WebMethod]Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能    public String[] GetWordList(string prefixText, int count)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能    Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能{Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能{Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能            Array.Sort(temp, new CaseInsensitiveComparer());Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能            autoCompleteWordList = temp;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        int index = Array.BinarySearch(autoCompleteWordList, prefixText,Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能          new CaseInsensitiveComparer());Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        if (index < 0)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能{Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        int matchingCount;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        for (matchingCount = 0;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能             matchingCount < count && index + matchingCount <Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能             autoCompleteWordList.Length;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能             matchingCount++)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能{Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能            if (!autoCompleteWordList[index +Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能              matchingCount].StartsWith(prefixText,Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能              StringComparison.CurrentCultureIgnoreCase))Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能            Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能{Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        String[] returnValue = new string[matchingCount];Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        if (matchingCount > 0)Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能{Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能              matchingCount);Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能        return returnValue;Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能<div class="page"id="links">Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能 <div id="content">Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能   <h2>AutoComplete server control</h2>Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能   <asp:TextBox ID="TextBox1" runat="server" Width="220px"></asp:TextBox>Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能    <atlas:AutoCompleteExtender runat="server" Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能     ID="autoComplete1">Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能       <atlas:AutoCompletePropertiesAtlas学习手记(4):使用AutoCompleteExtender实现自动完成功能          TargetControlID="TextBox1" Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能          Enabled="True" ServicePath="AutoCompleteService.asmx" Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能          ServiceMethod="GetWordList" Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能          minimumprefixlength="1"  />Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能    </atlas:AutoCompleteExtender>     Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能 </div>Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能</div>

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

Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能

完整示例下载:http://terrylee.cnblogs.com/Files/Terrylee/AutoCompleteExtenderDemo.rar

作者:TerryLee

原标题:Atlas学习手记(4):使用AutoCompleteExtender实现自动完成功能

关键词:atlas

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录