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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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取得一个类的属性和方法的实现代码
2011/05/22 PHP
php的一个简单加密解密代码
2014/01/14 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
编写Python CGI脚本的教程
2015/06/29 Python
详解python中asyncio模块
2018/03/03 Python
python数值基础知识浅析
2019/11/19 Python
django项目中新增app的2种实现方法
2020/04/01 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
土木工程应届生自荐信
2013/09/24 职场文书
教师节活动主持词
2014/04/02 职场文书
党员志愿者活动方案
2014/08/28 职场文书
员工教育培训协议书
2014/09/27 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
家庭贫困证明
2015/06/16 职场文书
Golang jwt身份认证
2022/04/20 Golang