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 相关文章推荐
js事件(Event)知识整理
Oct 11 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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版自动生成文章摘要
2008/07/23 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP 断点续传实例详解
2017/11/11 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python实现k-means算法
2018/02/23 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
品管员岗位职责
2013/11/10 职场文书
统计学教授推荐信
2014/09/18 职场文书
护理见习报告范文
2014/11/03 职场文书
八一建军节慰问信
2015/02/14 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js