西西軟件下載最安全的下載網(wǎng)站、值得信賴的軟件下載站!

首頁編程開發(fā)其它知識 → 使用AjaxControlToolkit實現(xiàn)百度搜索時的下拉列表提示

使用AjaxControlToolkit實現(xiàn)百度搜索時的下拉列表提示

相關(guān)軟件相關(guān)文章發(fā)表評論 來源:西西整理時間:2013/2/13 10:09:49字體大小:A-A+

作者:西西點(diǎn)擊:0次評論:1次標(biāo)簽: 下拉

  • 類型:濾鏡插件大小:1.5M語言:英文 評分:6.6
  • 標(biāo)簽:
立即下載

AjaxControlToolkit是一組控件的集合,可以實現(xiàn)自動補(bǔ)充文本框,點(diǎn)擊文本框彈出日歷,加水印等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,第二行代碼)

<%@ 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 的摘要說明
    /// </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();
        //}
    }
}
四,完成,運(yùn)行Web頁面即可看到文本框的自動補(bǔ)充效果,需要注意的地方如下:

AutoCompleteExtender控件參數(shù)說明:

1.TargetControlID:指定要實現(xiàn)提示功能的控件;

2.ServicePath:WebService的路徑,提取數(shù)據(jù)的方法是寫在一個WebService中的;

3.ServeiceMethod:寫在WebService中的用于提取數(shù)據(jù)的方法的名字;

4.MinimumPrefixLength:用來設(shè)置用戶輸入多少字母才出現(xiàn)提示效果;

5.CompletionSetCount:設(shè)置提示數(shù)據(jù)的行數(shù);

6.CompletionInterval:從服務(wù)器獲取書的時間間隔,單位是毫秒。

WebService.asmx 需要注意的地方:

  1.由于該WEB服務(wù)是為Ajax框架提供服務(wù)的,因此在類聲明之前得加上屬性聲明:
     [System.Web.Script.Services.ScriptService]
  2.特別需要注意的是GetTextString這個方法。凡是為AutoCompleteExtender控件提供服務(wù)的方法都必需完全滿足以下三個條件:
     A.方法的返回類型必需為:string [];
     B.方法的傳入?yún)?shù)類型必需為:string  ,   int;
     C.兩個傳入?yún)?shù)名必需為:prefixText  ,  count。

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(1)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)
    推薦文章

    沒有數(shù)據(jù)