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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
vue实现树状表格效果
Dec 29 Vue.js
编写跨浏览器的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
PHP 字符串分割和比较
2009/10/06 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
原生JS实现自定义滚动条效果
2020/10/27 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android