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 相关文章推荐
jquery对dom的操作常用方法整理
Jun 25 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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/12/06 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
实例讲解python函数式编程
2014/06/09 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS