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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
JS防抖和节流实例解析
Sep 24 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
第六节--访问属性和方法
2006/11/16 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
javascript页面加载完执行事件代码
2014/02/11 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
经济管理专业毕业生推荐信
2013/11/11 职场文书
高三自我评价
2014/02/01 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
淘宝好评语句大全
2014/12/31 职场文书
学校施工安全责任书
2015/01/29 职场文书
大雁塔英文导游词
2015/02/10 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers