AutoComplete(自動完成)AjaxControlTookit

2018-05-07

1672
0
2020-12-26

ASP.NET WebForm AutoComplete(自動完成)

先來廢話一下，最近案子的客戶由於表單上某個欄位，由於是透過選取的方式輸入

但是選項又很多，可能到幾百個，總不能全塞進來

就算全塞進來，這樣要找選項也不好找，因此就建議客戶使用這東西啦

使用者搜尋列打一個字就會跑出幾個跟這幾個字相關的搜尋結果可以讓使用者選擇

至於為什麼選用ASP.NET的東西來做..因為Jq的套件跟我某些套件有相衝，導致功能失效，才選微軟的東西來做...

雖然網路上先關的資料很多，我還是自己打一篇自己的排版以後看起來也爽

-------------------------------------------------以上都是廢話，下面開始使用教學-------------------------------------------------------------

首先，從Nuget下載他的Lib，輸入 AjaxControlToolkit，找到在安裝起來

在工具箱加入Ajax Toolkit的元件，選擇項目

按下瀏覽找到Ajax Toolkit的Lib，在packges的資料夾裡

選擇 AutoCompleteExtender，按下確定，工具箱就會出現該元件，因為這文章是他的教學當然只選他囉，其他就自行匯入玩玩囉

畫面上拉入幾個元件，

ScriptManger、TextBox、AutoCompleteExtender

<%-- 1.使用Ajax元件要加入ScriptManger元件 --%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%-- 2.拉一個AutoCompleteExtender --%>
<ajaxToolkit:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" BehaviorID="TextBox1_AutoCompleteExtender" CompletionInterval="100" DelimiterCharacters="" MinimumPrefixLength="1" ServiceMethod="TEST" ServicePath="" TargetControlID="TextBox1">
</ajaxToolkit:AutoCompleteExtender>
<%-- 3.拉一個TextBox --%>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

到設計畫面，透過UI設定一些屬性，點擊TextBox，加入擴充功能，選擇AutoCompleteExtender

幾個參數要設定

ServiceMethod：這個元件要觸發的方法名稱，就是要帶資料給他的函式

CompletetionInterval：延遲多久顯示資料，預設1000(一秒)

MinimumPrefxLength：幾個字會去觸發事件帶出資料

ServicePath：被呼叫的方法在哪個檔案中，如果元件跟程式都在同一個檔案裡就免了，如果其他表單要呼叫這個方法，就要加入

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static string[] TEST(string prefixText, int count)
{
    List<string> FirmList = new List<string>() {"aaa","aa","a" };
    return FirmList.ToArray();
}

結果

註1：通常都寫在asmx(WebService)裡面，統一管理，如果要寫新增一個類別檔裡做呼叫是沒辦法的

註2：記得重置CSS不然顯示資料會有一行空白

WebForm

回首頁