关于Ajax控件中的AutoCompleteExtender控件的一个简单应用

今天在看一个朋友用到了这个AutoCompleteExtender控件，感觉不错，给客户的体验应该是不错的，这个控件主要是用于根据客户输入的字符来搜索出相应的内容显示在下拉列表框中。

看这个控件的名字就知道是一个可扩展的控件了，它必须依赖于别人而存在-----这个别人指的是文本框. 所以, 首先要有一个宿主文本框:

<asp:TextBoxID="TextBox9"runat="server"></asp:TextBox>

<cc1:AutoCompleteExtenderID="TextBox9_AutoCompleteExtender"runat="server"Enabled="True"

OnClientItemSelected="ProductSelect"EnableCaching="true"CompletionInterval="100"

MinimumPrefixLength="1"ServiceMethod="GetProductList"ServicePath="~/Marketing/MyAutoComplete.asmx"

TargetControlID="TextBox9">

</cc1:AutoCompleteExtender>

这就是一个默认的文本框, 不需要任何多余的设定. 然后定义一个AutoCompleteExtender, 这里我们只设置了最基本的选项, 其它的选项后面我会说明:
这样 , 前台的工作就完成了, 然后还需要添加一个web 服务, 来向AutoCompleteExtender返回数据. 向项目中添加一个"web服务"文件, 如下图所示:

添加以后, 会在项目中生成一个webservice.asmx 文件, 不用管它, 因为使用了代码分离, 所以它只是一个路径引用, 用记事本打开它, 会发现这个文件只有一行, 指向App_Code 下面的同名, 但是扩展名为.cs 的文件. 我们现在打开App_Code目录, 找到webservice.cs , 会看到这样的几行:
[WebService(Namespace ="http://tempuri.org/")]
[WebServiceBinding(ConformsTo =WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public classWebService: System.Web.Services.WebService
默认情况下, 第三行属性[System.Web.Script.Services.ScriptService] 是被注释掉的, 把它打开 , 因为我们要在客户端调用. 然后就可以写入我们的方法了, 方法如下:

using System;

using System.Collections;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

using System.Collections.Generic;

using System.Data.SqlClient;

///<summary>

///MyAutoComplete

///</summary>

[WebService(Namespace ="http://tempuri.org/")]

[WebServiceBinding(ConformsTo =WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

publicclassMyAutoComplete : System.Web.Services.WebService {

public MyAutoComplete () {

}

[WebMethod]//这个方法是必须的，每建立一个方法就的加上这个，不然远程客户端就不能调用定义的方法

publicList<string> GetResult(string prefixText,int count)

{

List<string> getrs =newList<string>();

string sql ="select top " + count.ToString() +" UserName,Pwd from Test where UserName like '%" + prefixText.ToString() +"%' ";

SqlDataReader dr =DB.getdatareader(sql);

while (dr.Read())

{

string content = dr.GetString(0);

getrs.Add(content);

}

dr.Close();

//dr.Dispose();

return getrs;

}

}

这个函数的第一个参数, 就是用户录入的内容, 第二个参数, 是定义中指定的下拉列表长度, 也就是要返回的项的个数, 我们在定义中没有指定长度, 它会使用一个默认长度10 .

4.AutoCompleteExtender的其它属性
虽然到现在这个程度它已经可以动起来了, 但是还有很多属性我们没有用到, 下面我们逐个了解它的其它属性.
TargetControlID
这是必须指定的属性, 它指出Extender 应该寄宿到哪个控件身上, 上面的例子已经演示了它的用法, 就把目标控件的ID 赋给它即可.
ServicePath
指出要使用的服务的路径, 这里指的是asmx文件的路径, 而不是cs文件, 因为这里两个文件都处于根目录, 所以直接写入了文件名, 如果两个文件不在同一目录, 还要指出该asmx文件所在的路径. 例如: ../xx.asmx .
ServiceMethod
返回数据的函数, 填入目标函数名即可.
MinimumPrefixLength
最少需要录入的长度, 因为我们指定了1, 所以只要敲入一个字符, 就会立即弹出下拉列表, 如果把这个值改为3, 则至少要录入3个字符, 才会弹出下拉列表.
ContextKey
关于这个属性我有专门的一篇文章介绍, 请参阅ajaxToolkit:AutoCompleteExtender的自定义参数（contextKey)
UseContextKey
如果指定了ContextKey参数, 这个属性会被默认置为true, 所以一般不用去管这个参数 , 不过如果因为某种原因程序出了异常-----我就遇到过这种情况, 没有指定ContextKey参数, 但它非要调用包含ContextKey 的形式-----就可以显式地指定这个参数为true 或false.
CompletionInterval
它的单位是毫秒, 就是用户录入后多长时间, 程序去调用服务来获取数据 , 一般我设这个属性的值为1000. 或不设, 用它默认的值.
EnableCaching
这是一个要非常小心的属性, 如果把它设为true, 允许缓存, 则, 例如, 我第一次录入1, 返回包括1 的串, 然后我修改了数据源, 再次录入1, 还是返回以前的串, 在调试模式下, 在服务那边下断点, 会看到程序根本没有进来. 也就是说, 对于同样的录入, 控件只获取一次数据, 有多数情况下, 这是有益的, 它可以减少数据访问的次数, 但是在数据源经常变化的情况下, 它就是致命的, 它会向用户提供过时的, 错误的信息.
CompletionSetCount
这个属性指定一次应该返回多少项, 我们上面没有指定它, 返回了10项, 如果我们希望返回20项, 就指定它为20 即可.
CompletionListCssClass, CompletionListItemCssClass 和 CompletionListHighlightedItemCssClass
背景样式, 条目样式, 和鼠标悬念时所指向的条目的样式.
DelimiterCharacters
如果允许一次选中多项, 中间的分隔符 , 我个人感觉这个很容易造成混乱, 最好把它的值设成空, 也就是不允许选中多项.
FirstRowSelected
是否默认选中第一项.

其实还有一个属性是比较重要的，就是OnClientItemSelected，这个是调用一个方法，该方法用于对已经选择项后执行的事件。这个以后有时间再举例说明。