利用AjaxControlToolkit實現(xiàn)百度搜索時的下拉列表提示詳細(xì)步驟_AJAX教程
推薦:Ajax實現(xiàn)靜態(tài)刷新頁面過程帶加載旋轉(zhuǎn)圖片當(dāng)然你也可以使用jquery或者ajax寫動態(tài)加載table的方式來實現(xiàn),方式多種多樣,感興趣的朋友可以了解下,希望本文提供的靜態(tài)刷新頁面對你學(xué)習(xí)ajax有所幫助
AjaxControlToolkit是一組控件的集合,可以實現(xiàn)自動補(bǔ)充文本框,點擊文本框彈出日歷,加水印等Ajax效果,包含40多個控件,具體實現(xiàn)效果如:http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx像百度搜索一樣,根據(jù)用戶輸入自動聯(lián)想相關(guān)詞匯,借助AjaxControlToolkit中的AutoCompleteExtender控件很簡單的實現(xiàn),實現(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ù)制代碼 代碼如下:hl5o.cn
<%@ 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ù)制代碼 代碼如下:hl5o.cn
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)
{
List<string> suggestions = new List<string>();//聲明一泛型集合
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;
// List<String> list = new List<string>(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();
/
分享:JavaScript如何控制Session實現(xiàn)原理及代碼看到這個題目,或許有人會提出疑問,JavaScript代表客戶端,而Session代表的是服務(wù)器(不知道這樣說大家是否能夠理解)現(xiàn)在就回到了題目所描述的問題寫一個JavaScript方法,使其修改Session,感興趣的朋友可以了解下,或許本文對你學(xué)習(xí)ajax有所幫助
相關(guān)AJAX教程:
- Ajax中瀏覽器的緩存問題解決方法
- AJAX和WebService實現(xiàn)省市縣三級聯(lián)動具體代碼
- ajax 登錄功能簡單實現(xiàn)(未連接數(shù)據(jù)庫)
- AJAX和WebService實現(xiàn)郵箱驗證(無刷新驗證郵件地址是否合法)
- AJAX和三層架構(gòu)實現(xiàn)分頁功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時間及時間格式輸出處理
- ajax傳遞多個參數(shù)具體實現(xiàn)
- ajax傳遞一個參數(shù)具體實現(xiàn)
- 滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- 相關(guān)鏈接:
復(fù)制本頁鏈接| 搜索利用AjaxControlToolkit實現(xiàn)百度搜索時的下拉列表提示詳細(xì)步驟
- 教程說明:
AJAX教程-利用AjaxControlToolkit實現(xiàn)百度搜索時的下拉列表提示詳細(xì)步驟
。