当前位置: 首页 > 图文教程 > 网络编程 > Javascript > ajaxControlToolkit AutoCompleteExtender的用法

Javascript
IE8 原生JSON支持
iframe 自适应高度[在IE6 IE7 FF下测试通过]
javascript 清除输入框中的数据
IE和FireFox(FF)中js和css的不同
JavaScript asp.net 获取当前超链接中的文本
用JavaScript页面不刷新时全选择,全删除(GridView)
JavaScript获取GridView选择的行内容
javaScript 读取和设置文档元素的样式属性
js select 控制实现代码
javascript 类方法定义还是有点区别
jQuery 绝对入门
网页开发中的容易忽略的问题 javascript HTML中的table
childNodes 用法两例
js 只能输入数字和小数点的文本框改进版
javascript 09年最新版的省市联动
jquery 实现的全选和反选
js 拖拽翻页实现代码
保证JavaScript和Asp、Php等后端程序间传值编码统一
JavaScript 无符号右移赋值操作
JavaScript 无符号右移运算符

Javascript 中的 ajaxControlToolkit AutoCompleteExtender的用法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 347 ::
收藏到网摘: n/a

昨天在搜索中使用了这个控件,不过不知道为什么在IE中反应比较慢 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();
}
}
有哪里不对的地方还请大家指教