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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
关于js类的定义
Jun 28 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
JavaScript函数重载操作实例浅析
May 02 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/07/04 PHP
php array_walk() 数组函数
2011/07/12 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
js+html制作简单验证码
2017/02/16 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
微信小程序class封装http代码实例
2019/08/24 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
初中家长评语大全
2014/12/26 职场文书
2016年春节慰问信息
2015/03/25 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
python常见的占位符总结及用法
2021/07/02 Python