Ajax 中 AutoCompleteExtender 的使用

======================================================
注：本文源代码点此下载
======================================================

在ajax中 ,此控件的使用非常的普遍,尤其是用于做查询时非常的实用,下面看简单的例子,其中要注意几个细节,

实例:

1、建立一个ajax enable 的web site,在网站添加一个web 窗体;

2、在网页首页添加一个scirptmanager控件,用于注册ajax框架;

3、拖放一个textbox控件和autocompleteextender控件,由于此控件要联合web service一起使用,下面建立web service

4、建立web service :在sln中添加一个新项 (web 服务),然后在cs文件后追加如下代码

[webmethod]

public string[] getproductsname(string prefixtext, int count)

{

sqlconnection con = new sqlconnection(configurationmanager.connectionstrings["constr"].connectionstring);

sqlcommand command = new sqlcommand();

command.connection = con;

command.commandtype = commandtype.storedprocedure;

command.commandtext = "sp_getproductnamesbyname";

sqlparameter[] para = new sqlparameter[]

{

new sqlparameter("@productname",prefixtext),

new sqlparameter("@count",count)

};

command.parameters.addrange(para);

sqldataadapter reader = new sqldataadapter(command);

dataset ds = new dataset();

reader.fill(ds);

list names = new list();

foreach (datarow row in ds.tables[0].rows)

{

names.add(row[0].tostring());

}

return names.toarray();

}

主要要在类的上方添加特性[system.web.script.services.scriptservice()],当然在此处还有另一种解决办法:

将现在目前有的三个特性删除,然后引用命名空间 system.web.script.services;添加特性[scriptservice],效果是一样的,

其中在此注意方法的返回类型必须为string[]类型,方法必须有两个参数,参数名称和类型要和此实例中的一样(从此控件自动添加方法中去截取前两个就可以了),

一般情况下,第一个参数是用户输入的关键字,而第二个参数则是要求结果返回的条数,那么在此又要提到写这样的存储过程的要点,在此实例中的存储过程为:

if exists(select * from sysobjects where name='sp_getproductnames')

drop proc sp_getproductnames

go

create proc sp_getproductnames

@productname varchar(50),

@count int

as

exec('select top '+@count+'[productname] from [products] where [productname] like'+ '''%'+@productname+'%''')

go

在此注意,在存储过程中select top 后不能跟参数,所以为了实现功能,我们就用exec关键字,后面的连续几个‘(单引号) ,是因为在sql中两个’(单引号)表示一个单引号,而此字段又为varchar类型,所以会有三个连续的单引号。

另外,如果只在控件中用属性 completesetcount 去限制,而存储过程没有限制的话,是没有用的,要前后一致就可以了。

5、配置autocompleteextender控件,下面是配置代码:

id="autocompleteextender1"

runat="server"

targetcontrolid="textbox1"

completioninterval="100"//表示自动提示数据多长时间后显示

completionsetcount="5"//设置数据的条数

enablecaching="true"//是否启用缓存

enabled="true"//是否启用此控件

firstrowselected="true"//设置第一项是否被选中

minimumprefixlength="1"//设置用户输入几个字符后开始显示提示数据

servicemethod="getproductsname"//显示数据要用到的web service 方法

servicepath="webservice/webservice.asmx"//显示数据要用到的web service文件

6、在浏览器浏览此页,就o了,应该没有问题的。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/