demoshop

NEWS

demo, trying to be the best.

站內搜尋載入中...

利用AutoComplete來達到自動完成的效果

  • 4841
  • 3

這是一個很方便的機制,因為它能夠給使用者一個自行輸入的環境,又可以立刻的找出是否有類似值來減少使用者輸入的字數。

    ★注意事項:想玩這玩意當然你必須要有

    1. ASP.NET AJAX 1.0版本(下載)
    2. ASP.NET AJAX Control Toolkit (下載頁)

    頁面上放置一個TextBox和一個Button,並且拉出一個AutoCompleteExtender

    <asp:TextBox ID="txtSearch" runat="server" Width="400px"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"
        ServiceMethod="GetName" TargetControlID="txtSearch">
    </ajaxToolkit:AutoCompleteExtender>
    <asp:Button ID="Button1" runat="server" Text="搜尋" /> 

    我們調用了一個網頁方法,所以我們就在程式頁中實做它吧

      [System.Web.Services.WebMethod]
     [System.Web.Script.Services.ScriptMethod()]
     public static string[] GetName(string prefixText, int count)
     {
     
         List<string> suggestions = new List<string>();
         SqlConnection conn = demotools.getSqlConnection();
         SqlCommand comm = conn.CreateCommand();
         comm.CommandText = "SELECT title, kind FROM skill WHERE (title LIKE '%'+@title + '%')";
         comm.Parameters.AddWithValue("title", prefixText);
         conn.Open();
         SqlDataReader reader = comm.ExecuteReader(CommandBehavior.CloseConnection);
     
         int matchCount = 1;
         try
         {
             while (reader.Read() && (matchCount <= count))
             {
                 suggestions.Add(reader[0].ToString());
                 matchCount++;
             }
             return suggestions.ToArray();
         }
         catch (Exception ex)
         {
             suggestions.Add(ex.Message);
             return suggestions.ToArray();
         }
         finally
         {
             comm.Dispose();
             reader.Dispose();
         }
     } 

    這樣子就可以有一個自動完成的文字方塊了