Atlas学习手记(4):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文件夹:

  单词库

access control list (ACL)
ADO.NET
aggregate 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.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;
  }
}

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

<atlas:ScriptManager id="AtlasPage1" runat="server" />
<div class="page"id="links">
<div id="content">
  <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>

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

本文作者:本文示例源代码或素材下载

  主要内容

  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文件夹:

  单词库

access control list (ACL)
ADO.NET
aggregate 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.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;
  }
}

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

<atlas:ScriptManager id="AtlasPage1" runat="server" />
<div class="page"id="links">
<div id="content">
  <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>

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

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3