主頁 > 知識庫 > 利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟

利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟

AjaxControlToolkit是一組控件的集合，可以實(shí)現(xiàn)自動(dòng)補(bǔ)充文本框，點(diǎn)擊文本框彈出日歷，加水印等Ajax效果,包含40多個(gè)控件,具體實(shí)現(xiàn)效果如：http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx
像百度搜索一樣，根據(jù)用戶輸入自動(dòng)聯(lián)想相關(guān)詞匯，借助AjaxControlToolkit中的AutoCompleteExtender控件很簡單的實(shí)現(xiàn)，實(shí)現(xiàn)效果如下：
詳細(xì)步驟：
一：Vs中安裝AjaxControlToolkit
AjaxControlToolkit安裝到VS中(需要注意版本問題)：
安裝方法：http://www.asp.net/ajaxlibrary/act.ashx
相應(yīng)版本提示：http://ajaxcontroltoolkit.codeplex.com/
二：Web頁面中調(diào)用AutoCompleteExtender(頁面中要提前Register,第二行代碼)

復(fù)制代碼代碼如下:

 
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HTML_editor.WebForm1" %> 
%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %> 
!DOCTYPE html> 
html xmlns="http://www.w3.org/1999/xhtml"> 
head runat="server"> 
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
title>/title> 
/head> 
body> 
form id="form1" runat="server"> 
div> 
asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" /> 
asp:TextBox ID="TextBox1" runat="server">/asp:TextBox> 
asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
TargetControlID="TextBox1" 
CompletionSetCount="10" 
EnableCaching="true" 
MinimumPrefixLength="1" 
CompletionInterval="100" 
ServicePath="WebService.asmx" 
ServiceMethod="GetEnglishName"> 
/asp:AutoCompleteExtender> 
/div> 
/form> 
/body> 
/html> 

三：添加Web服務(wù) WebService.asmx

復(fù)制代碼代碼如下:

 
using System; 
using System.Collections.Generic; 
using System.Data.SqlClient; 
using System.Linq; 
using System.Web; 
using System.Web.Script.Services; 
using System.Web.Services; 
namespace HTML_editor 
{ 
/// summary> 
/// WebService 的摘要說明 
/// /summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[System.ComponentModel.ToolboxItem(false)] 
// 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)，請取消注釋以下行。 
[System.Web.Script.Services.ScriptService] 
public class WebService : System.Web.Services.WebService 
{ 
//從數(shù)據(jù)庫中讀取匹配信息 
[WebMethod] 
[ScriptMethod] 
public string[] GetEnglishName(string prefixText, int count) 
{ 
Liststring> suggestions = new Liststring>();//聲明一泛型集合 
SqlConnection con = new SqlConnection("server=.;database=Attendance;uid=sa;pwd=;"); 
con.Open(); 
SqlCommand com = new SqlCommand(" select [EnglishName] from [Employee] where [EnglishName] like '%t%' order by [EnglishName]", con); 
SqlDataReader sdr = com.ExecuteReader(); 
while (sdr.Read()) 
{ 
suggestions.Add(sdr.GetString(0)); 
} 
sdr.Close(); 
con.Close(); 
return suggestions.ToArray(); 
} 
//直接用方法產(chǎn)生匹配信息 
//[WebMethod] 
//public string[] GetCompleteList(string prefixText, int count) 
//{ 
// char c1, c2, c3; 
// if (count == 0) 
// count = 10; 
// ListString> list = new Liststring>(count); 
// Random rnd = new Random(); 
// for (int i = 1; i = count; i++) 
// { 
// c1 = (char)rnd.Next(65, 90); 
// c2 = (char)rnd.Next(97, 122); 
// c3 = (char)rnd.Next(97, 122); 
// list.Add(prefixText + c1 + c2 + c3); 
// } 
// return list.ToArray(); 
//} 
} 
} 

四：完成，運(yùn)行Web頁面即可看到文本框的自動(dòng)補(bǔ)充效果，需要注意的地方如下：
AutoCompleteExtender控件參數(shù)說明：
1.TargetControlID:指定要實(shí)現(xiàn)提示功能的控件；
2.ServicePath:WebService的路徑，提取數(shù)據(jù)的方法是寫在一個(gè)WebService中的；
3.ServeiceMethod:寫在WebService中的用于提取數(shù)據(jù)的方法的名字；
4.MinimumPrefixLength:用來設(shè)置用戶輸入多少字母才出現(xiàn)提示效果；
5.CompletionSetCount:設(shè)置提示數(shù)據(jù)的行數(shù)；
6.CompletionInterval:從服務(wù)器獲取書的時(shí)間間隔，單位是毫秒。
WebService.asmx 需要注意的地方：
　　1.由于該WEB服務(wù)是為Ajax框架提供服務(wù)的，因此在類聲明之前得加上屬性聲明：
　　　　　[System.Web.Script.Services.ScriptService]
　　2.特別需要注意的是GetTextString這個(gè)方法。凡是為AutoCompleteExtender控件提供服務(wù)的方法都必需完全滿足以下三個(gè)條件：
　　　　　A.方法的返回類型必需為：string []；
　　　　　B.方法的傳入?yún)?shù)類型必需為：string , int；
　　　　　C.兩個(gè)傳入?yún)?shù)名必需為：prefixText , count。
文本框輸入的值傳遞到WebService中：
aspx:

復(fù)制代碼代碼如下:

 
%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSearch.aspx.cs" Inherits="TestSearch" %> 
%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %> 
!DOCTYPE html> 
html xmlns="http://www.w3.org/1999/xhtml"> 
head runat="server"> 
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
title>/title> 
script type="text/javascript"> 
function OnTxtPersonInfoKeyDown() { 
var val = document.getElementById("%=TextBox1.ClientID %>").value; 
var NameClientID = "%=AutoCompleteExtender1.ClientID %>"; 
var acName = $find(NameClientID); 
if (acName != null) { 
acName.set_contextKey(val); 
} 
} 
function OnTxtPersonInfoKeyDown2() { 
var val = document.getElementById("%=TextBox2.ClientID %>").value; 
var NameClientID = "%=AutoCompleteExtender2.ClientID %>"; 
var acName = $find(NameClientID); 
if (acName != null) { 
acName.set_contextKey(val); 
} 
} 
/script> 
/head> 
body> 
form id="form1" runat="server"> 
div> 
asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" /> 
asp:TextBox ID="TextBox1" runat="server">/asp:TextBox> 
asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
TargetControlID="TextBox1" 
CompletionSetCount="10" 
EnableCaching="false" 
FirstRowSelected="true" 
UseContextKey="True" 
MinimumPrefixLength="0" 
CompletionInterval="100" 
ServicePath="WebService.asmx" 
ServiceMethod="GetEnglishName"> 
/asp:AutoCompleteExtender> 
br /> 
asp:TextBox ID="TextBox2" runat="server">/asp:TextBox> 
asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" 
TargetControlID="TextBox2" 
CompletionSetCount="10" 
EnableCaching="false" 
FirstRowSelected="true" 
UseContextKey="True" 
MinimumPrefixLength="0" 
CompletionInterval="100" 
ServicePath="WebService.asmx" 
ServiceMethod="GetEnglishName"> 
/asp:AutoCompleteExtender> 
/div> 
/form> 
/body> 
/html> 

aspx.cs

復(fù)制代碼代碼如下:

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
public partial class TestSearch : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
TextBox1.Attributes.Add("onkeydown", "return OnTxtPersonInfoKeyDown();"); 
TextBox2.Attributes.Add("onkeydown", "return OnTxtPersonInfoKeyDown2();"); 
} 
} 

webservice.asmx.cs

復(fù)制代碼代碼如下:

 
%@ WebService Language="C#" Class="WebService" %> 
using System; 
using System.Web; 
using System.Web.Services; 
using System.Web.Services.Protocols; 
using System.Web.Script.Services; 
using System.Data; 
using System.Data.SqlClient; 
using System.Collections.Generic; 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
// 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)，請取消注釋以下行。 
[System.Web.Script.Services.ScriptService] 
public class WebService : System.Web.Services.WebService 
{ 
//從數(shù)據(jù)庫中讀取匹配信息 
[WebMethod] 
[ScriptMethod] 
public string[] GetEnglishName(string prefixText, int count, string contextKey) 
{ 
SQLHelper sqlH = new SQLHelper(); 
//contextKey = "t"; 
string strSql = " select [EnglishName] from [Employee] where [LeftDate] is null and [EnglishName] like '" + contextKey + "%' order by [EnglishName] "; 
DataTable dt = sqlH.ExecuteQuery(strSql, CommandType.Text); 
Liststring> suggestions = new Liststring>();//聲明一泛型集合
suggestions.Clear(); 
if (dt.Rows.Count > 0) 
{ 
for (int i = 0; i  dt.Rows.Count; i++) 
{ 
suggestions.Add(dt.Rows[i][0].ToString()); 
} 
} 
return suggestions.ToArray(); 
} 
} 

您可能感興趣的文章:

jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
ajax實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果示例
Ajax動(dòng)態(tài)為下拉列表添加數(shù)據(jù)的實(shí)現(xiàn)方法

標(biāo)簽：大理棗莊萍鄉(xiāng) 蚌埠江蘇衡水衢州廣元

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。