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 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
vant 中van-list的用法说明
Nov 11 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实现文件上传二法
2006/10/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
python插入排序算法的实现代码
2013/11/21 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python实现textrank关键词提取
2018/06/22 Python
python实现梯度下降算法
2020/03/24 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
Python使用Pygame绘制时钟
2020/11/29 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
实习护理工作自我评价
2013/09/25 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
老兵退伍感言
2015/08/03 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏