ajaxControlToolkit AutoCompleteExtender的用法
更新時(shí)間:2008年10月30日 14:22:01 作者:
昨天在搜索中使用了這個(gè)控件,不過(guò)不知道為什么在IE中反應(yīng)比較慢
AutoCompleteExtender 自動(dòng)完成擴(kuò)展, 配合TextBox使用功能類似現(xiàn)在google中輸入搜索字,則在TextBox下出來(lái)下拉框顯示搜索目標(biāo)中的項(xiàng)目
這個(gè)擴(kuò)展控件需要配合Web Service使用,所以涉及了點(diǎn)web Service的使用(這里只簡(jiǎn)單談下,等用熟了再仔細(xì)談下web service的內(nèi)容)
先介紹下AutoCompleteExtender的幾個(gè)關(guān)鍵屬性:
a,TargetControlID 這個(gè)屬性是所有AjaxControlToolkit的共同屬性,就是擴(kuò)展目標(biāo)控件ID(官方這么說(shuō)的吧)
b.CompletionSetCount 這個(gè)屬性是設(shè)置顯示下拉結(jié)果的條數(shù) 默認(rèn)為10吧
c.MinimumPrefixTextLength 這個(gè)屬性是設(shè)置輸入幾個(gè)字符的長(zhǎng)度后調(diào)用webService中的方法顯示下拉列表
d.ServicePath 這個(gè)屬性設(shè)置需要調(diào)用的web Service路徑
e.ServiceMethod 這個(gè)屬性設(shè)置需要調(diào)用的web Service中的方法(函數(shù))
f.EnableCaching:是否在客戶端緩存數(shù)據(jù),默認(rèn)為true
g.CompletionInterval:從服務(wù)器讀取數(shù)據(jù)的時(shí)間間隔,默認(rèn)為1000,單位:毫秒
注:如果習(xí)慣用可視控件設(shè)置屬性,則a屬性在AutoCompleteExtender中設(shè)置,其他屬性則設(shè)置了TargetControlId后,在相應(yīng)的TargetControl中會(huì)多出來(lái)個(gè)Extenders屬性中設(shè)置,如果習(xí)慣手寫代碼,則在AutoCompleteExtender代碼屬性中設(shè)置。
例子: 1.新建一個(gè)頁(yè)面,加入ScriptManager控件 一個(gè)TextBox控件 一個(gè)AutoCompleteExtender控件
2.新建立一個(gè)webService,添加一個(gè)[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();
//這里是我在數(shù)據(jù)庫(kù)中取數(shù)據(jù)的代碼 其中SqlHelper類是項(xiàng)目中的取數(shù)據(jù)基類
//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是在數(shù)據(jù)庫(kù)中的一個(gè)字段中取數(shù)據(jù)
頁(yè)面代碼:
<%@ 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簡(jiǎn)單練習(xí)</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 的摘要說(shuō)明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//下面是必須的,否則功能無(wú)法實(shí)現(xiàn)
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService {
public AutoComplete () {
//如果使用設(shè)計(jì)的組件,請(qǐng)取消注釋以下行
//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();
//這里是我在數(shù)據(jù)庫(kù)中取數(shù)據(jù)的代碼 其中SqlHelper類是項(xiàng)目中的取數(shù)據(jù)基類
//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();
}
}
有哪里不對(duì)的地方還請(qǐng)大家指教
這個(gè)擴(kuò)展控件需要配合Web Service使用,所以涉及了點(diǎn)web Service的使用(這里只簡(jiǎn)單談下,等用熟了再仔細(xì)談下web service的內(nèi)容)
先介紹下AutoCompleteExtender的幾個(gè)關(guān)鍵屬性:
a,TargetControlID 這個(gè)屬性是所有AjaxControlToolkit的共同屬性,就是擴(kuò)展目標(biāo)控件ID(官方這么說(shuō)的吧)
b.CompletionSetCount 這個(gè)屬性是設(shè)置顯示下拉結(jié)果的條數(shù) 默認(rèn)為10吧
c.MinimumPrefixTextLength 這個(gè)屬性是設(shè)置輸入幾個(gè)字符的長(zhǎng)度后調(diào)用webService中的方法顯示下拉列表
d.ServicePath 這個(gè)屬性設(shè)置需要調(diào)用的web Service路徑
e.ServiceMethod 這個(gè)屬性設(shè)置需要調(diào)用的web Service中的方法(函數(shù))
f.EnableCaching:是否在客戶端緩存數(shù)據(jù),默認(rèn)為true
g.CompletionInterval:從服務(wù)器讀取數(shù)據(jù)的時(shí)間間隔,默認(rèn)為1000,單位:毫秒
注:如果習(xí)慣用可視控件設(shè)置屬性,則a屬性在AutoCompleteExtender中設(shè)置,其他屬性則設(shè)置了TargetControlId后,在相應(yīng)的TargetControl中會(huì)多出來(lái)個(gè)Extenders屬性中設(shè)置,如果習(xí)慣手寫代碼,則在AutoCompleteExtender代碼屬性中設(shè)置。
例子: 1.新建一個(gè)頁(yè)面,加入ScriptManager控件 一個(gè)TextBox控件 一個(gè)AutoCompleteExtender控件
2.新建立一個(gè)webService,添加一個(gè)[WebMethod]方法
[WebMethod]
復(fù)制代碼 代碼如下:
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();
//這里是我在數(shù)據(jù)庫(kù)中取數(shù)據(jù)的代碼 其中SqlHelper類是項(xiàng)目中的取數(shù)據(jù)基類
//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是在數(shù)據(jù)庫(kù)中的一個(gè)字段中取數(shù)據(jù)
頁(yè)面代碼:
復(fù)制代碼 代碼如下:
<%@ 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簡(jiǎn)單練習(xí)</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 的摘要說(shuō)明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//下面是必須的,否則功能無(wú)法實(shí)現(xiàn)
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService {
public AutoComplete () {
//如果使用設(shè)計(jì)的組件,請(qǐng)取消注釋以下行
//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();
//這里是我在數(shù)據(jù)庫(kù)中取數(shù)據(jù)的代碼 其中SqlHelper類是項(xiàng)目中的取數(shù)據(jù)基類
//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();
}
}
有哪里不對(duì)的地方還請(qǐng)大家指教
相關(guān)文章
限制textbox或textarea輸入字符長(zhǎng)度的JS代碼
textbox或textarea的輸入字符限制有很多方法,在本將為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-10-10
JavaScript實(shí)現(xiàn)單例模式實(shí)例分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)單例模式實(shí)例以及代碼講解,有需要的讀者們跟著學(xué)習(xí)參考下吧。2017-12-12
moment.js使用方法總結(jié)(全網(wǎng)最全)
日常開(kāi)發(fā)中通常會(huì)對(duì)時(shí)間進(jìn)行下面這幾個(gè)操作,比如獲取時(shí)間,設(shè)置時(shí)間,格式化時(shí)間,比較時(shí)間等等,下面這篇文章主要給大家介紹了關(guān)于moment.js使用方法的相關(guān)資料,需要的朋友可以參考下2024-03-03
JavaScript從數(shù)組中刪除特定數(shù)據(jù)的方法總結(jié)
js數(shù)組是js部分非常重要的知識(shí),有時(shí)我們有這么個(gè)需求js數(shù)組刪除指定元素,下面這篇文章主要給大家介紹了關(guān)于JavaScript從數(shù)組中刪除特定數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-08-08
JS字符串長(zhǎng)度判斷,超出進(jìn)行自動(dòng)截取的實(shí)例(支持中文)
下面小編就為大家?guī)?lái)一篇JS字符串長(zhǎng)度判斷,超出進(jìn)行自動(dòng)截取的實(shí)例(支持中文)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Three.js獲取鼠標(biāo)點(diǎn)擊的三維坐標(biāo)示例代碼
本篇文章主要介紹了Three.js獲取鼠標(biāo)點(diǎn)擊的三維坐標(biāo)示例代碼。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03
輕松玩轉(zhuǎn)BootstrapTable(后端使用SpringMVC+Hibernate)
這篇文章主要和大家輕松玩轉(zhuǎn)BootstrapTable,后端使用SpringMVC+Hibernate,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色呢?控制textarea的style設(shè)置Textarea以及把文本放到標(biāo)記里都不會(huì)起作用,下面有個(gè)不錯(cuò)的解決方法,感興趣的朋友可以了解下2014-01-01

