利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟
像百度搜索一樣,根據(jù)用戶輸入自動(dòng)聯(lián)想相關(guān)詞匯,借助AjaxControlToolkit中的AutoCompleteExtender控件很簡(jiǎn)單的實(shí)現(xiàn),實(shí)現(xiàn)效果如下:
詳細(xì)步驟:
一:Vs中安裝AjaxControlToolkit
AjaxControlToolkit安裝到VS中(需要注意版本問(wèn)題):
安裝方法:http://www.asp.net/ajaxlibrary/act.ashx
相應(yīng)版本提示:http://ajaxcontroltoolkit.codeplex.com/
二:Web頁(yè)面中調(diào)用AutoCompleteExtender(頁(yè)面中要提前Register,第二行代碼)
<%@ 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
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 的摘要說(shuō)明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù),請(qǐng)取消注釋以下行。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
//從數(shù)據(jù)庫(kù)中讀取匹配信息
[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();
//}
}
}
四:完成,運(yùn)行Web頁(yè)面即可看到文本框的自動(dòng)補(bǔ)充效果,需要注意的地方如下:
AutoCompleteExtender控件參數(shù)說(shuō)明:
1.TargetControlID:指定要實(shí)現(xiàn)提示功能的控件;
2.ServicePath:WebService的路徑,提取數(shù)據(jù)的方法是寫(xiě)在一個(gè)WebService中的;
3.ServeiceMethod:寫(xiě)在WebService中的用于提取數(shù)據(jù)的方法的名字;
4.MinimumPrefixLength:用來(lái)設(shè)置用戶輸入多少字母才出現(xiàn)提示效果;
5.CompletionSetCount:設(shè)置提示數(shù)據(jù)的行數(shù);
6.CompletionInterval:從服務(wù)器獲取書(shū)的時(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:
<%@ 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
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
<%@ 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ù),請(qǐng)取消注釋以下行。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
//從數(shù)據(jù)庫(kù)中讀取匹配信息
[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);
List<string> suggestions = new List<string>();//聲明一泛型集合
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();
}
}
- AJAX亂碼與異步同步以及封裝jQuery庫(kù)實(shí)現(xiàn)步驟詳解
- jquery?ajax實(shí)現(xiàn)文件上傳提交的實(shí)戰(zhàn)步驟
- 實(shí)現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟
- js 實(shí)現(xiàn)ajax發(fā)送步驟過(guò)程詳解
- AJAX的原理—如何做到異步和局部刷新【實(shí)現(xiàn)代碼】
- 談?wù)凙jax原理實(shí)現(xiàn)過(guò)程
- 利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
- Ajax二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)原理及代碼
- js/ajax跨越訪問(wèn)-jsonp的原理和實(shí)例(javascript和jquery實(shí)現(xiàn)代碼)
- Ajax實(shí)現(xiàn)步驟和原理解析
相關(guān)文章
ajax實(shí)現(xiàn)select三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了ajax動(dòng)態(tài)實(shí)現(xiàn)select三級(jí)聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01
非常簡(jiǎn)單的Ajax請(qǐng)求實(shí)例附源碼
這篇文章為大家推薦了一個(gè)非常簡(jiǎn)單的Ajax請(qǐng)求實(shí)例,可以在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù),感興趣的小伙伴們可以參考一下2015-11-11
利用XMLHTTP實(shí)現(xiàn)的二級(jí)連動(dòng)Select
利用XMLHTTP實(shí)現(xiàn)的二級(jí)連動(dòng)Select...2006-09-09
django使用ajax post數(shù)據(jù)出現(xiàn)403錯(cuò)誤如何解決
在django中,使用jquery ajax post數(shù)據(jù),會(huì)出現(xiàn)403的錯(cuò)誤,該如何解決呢?下面由腳本之家小編幫大家解決django使用ajax post數(shù)據(jù)出現(xiàn)403錯(cuò)誤,需要的朋友可以參考下2015-09-09
關(guān)于ajax網(wǎng)絡(luò)請(qǐng)求的封裝實(shí)例
下面小編就為大家?guī)?lái)一篇關(guān)于ajax網(wǎng)絡(luò)請(qǐng)求的封裝實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
Ajax局部刷新應(yīng)用案例---簡(jiǎn)單登錄
Ajax局部刷新在之前的文章中也有介紹過(guò),下面以一個(gè)登錄的例子為大家介紹下其具體的使用2013-12-12
Ajax 配合node js multer 實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了Ajax 配合node js multer 實(shí)現(xiàn)文件上傳功能,需要的朋友可以參考下2017-08-08
不使用XMLHttpRequest對(duì)象實(shí)現(xiàn)Ajax效果的方法小結(jié)
這篇文章主要介紹了不使用XMLHttpRequest對(duì)象實(shí)現(xiàn)Ajax效果的方法,結(jié)合具體實(shí)例形式分析了三種不使用XMLHttpRequest對(duì)象實(shí)現(xiàn)Ajax功能的相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-07-07

