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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
addRule在firefox下的兼容写法
Nov 30 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JavaScript数组操作详解
Feb 04 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
浅谈开发eslint规则
Oct 01 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
域名和cookie问题(域名后缀)
2012/10/10 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php intval函数用法总结
2019/04/14 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Tensorflow 多线程设置方式
2020/02/06 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
python中get和post有什么区别
2020/06/19 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
计算机应用应届生求职信
2014/07/12 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
先进教师事迹材料
2014/12/16 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫