ajaxControlToolkit AutoCompleteExtender的用法


Posted in Javascript onOctober 30, 2008

AutoCompleteExtender 自动完成扩展, 配合TextBox使用功能类似现在google中输入搜索字,则在TextBox下出来下拉框显示搜索目标中的项目
这个扩展控件需要配合Web Service使用,所以涉及了点web Service的使用(这里只简单谈下,等用熟了再仔细谈下web service的内容)
先介绍下AutoCompleteExtender的几个关键属性:
a,TargetControlID 这个属性是所有AjaxControlToolkit的共同属性,就是扩展目标控件ID(官方这么说的吧)
b.CompletionSetCount 这个属性是设置显示下拉结果的条数 默认为10吧
c.MinimumPrefixTextLength 这个属性是设置输入几个字符的长度后调用webService中的方法显示下拉列表
d.ServicePath 这个属性设置需要调用的web Service路径
e.ServiceMethod 这个属性设置需要调用的web Service中的方法(函数)
f.EnableCaching:是否在客户端缓存数据,默认为true
g.CompletionInterval:从服务器读取数据的时间间隔,默认为1000,单位:毫秒
注:如果习惯用可视控件设置属性,则a属性在AutoCompleteExtender中设置,其他属性则设置了TargetControlId后,在相应的TargetControl中会多出来个Extenders属性中设置,如果习惯手写代码,则在AutoCompleteExtender代码属性中设置。
例子: 1.新建一个页面,加入ScriptManager控件 一个TextBox控件 一个AutoCompleteExtender控件
2.新建立一个webService,添加一个[WebMethod]方法
[WebMethod] 

public string[] GetString(string prefixText, int count){ 
System.Collections.Generic.List<string> list = new System.Collections.Generic.List<string>(count); 
System.Data.DataSet ds = new System.Data.DataSet(); 
//这里是我在数据库中取数据的代码 其中SqlHelper类是项目中的取数据基类 
//string strSql = string.Format("SELECT TOP {0} NAME FROM CengWei WHERE NAME LIKE '{1}%' ORDER BY NAME",count,prefixText); 
//ds = SqlHelper.Query(strSql); 
//for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
//{ 
// list.Add(ds.Tables[0].Rows[i][0].ToString()); 
//} 
for (int i = 0; i < count; i++) 
{ 
list.Add(prefixText+i.ToString()); 
} 
return list.ToArray(); 
}

其中:必须在webService的类上面添加
[System.Web.Script.Services.ScriptService]
示例代码:webService是在数据库中的一个字段中取数据
页面代码: 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %> 
<%@ Register Assembly="CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" 
Namespace="CrystalDecisions.Web" TagPrefix="CR" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>DropDownExtender简单练习</title> 
<link href="/aspnet_client/System_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css" 
rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True" EnableScriptLocalization="True"> 
</asp:ScriptManager> 
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> 
<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" MinimumPrefixLength="1" 
ServiceMethod="GetString" ServicePath="AutoComplete.asmx" TargetControlID="TextBox2"> 
</cc1:AutoCompleteExtender> 
</form> 
</body> 
</html>

webService代码:
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
/// <summary>
/// AutoComplete 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//下面是必须的,否则功能无法实现
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService {
public AutoComplete () {
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
}
[WebMethod]
public string[] GetString(string prefixText, int count){
System.Collections.Generic.List<string> list = new System.Collections.Generic.List<string>(count);
System.Data.DataSet ds = new System.Data.DataSet();
//这里是我在数据库中取数据的代码 其中SqlHelper类是项目中的取数据基类
//string strSql = string.Format("SELECT TOP {0} NAME FROM CengWei WHERE NAME LIKE '{1}%' ORDER BY NAME",count,prefixText);
//ds = SqlHelper.Query(strSql);
//for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
//{
// list.Add(ds.Tables[0].Rows[i][0].ToString());
//}
for (int i = 0; i < count; i++)
{
list.Add(prefixText+i.ToString());
}
return list.ToArray();
}
}
有哪里不对的地方还请大家指教
Javascript 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
vue实现评价星星功能
Jun 30 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 #Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 #Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 #Javascript
JavaScript函数、方法、对象代码
Oct 29 #Javascript
js身份证验证超强脚本
Oct 26 #Javascript
javascript引导程序
Oct 26 #Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 #Javascript
You might like
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
Dojo 学习要点
2010/09/03 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
Django如何实现上传图片功能
2019/08/16 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
说明书怎么写
2014/05/06 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL