[ASP.NET]實現自動搜索功能

[ASP.NET]實現自動搜索功能

上課教到類似google的自動搜索功能

pic1

實作一下順便記憶

 

1. 下載ajax control toolkit

http://ajaxcontroltoolkit.codeplex.com/releases/view/43475

範例網站

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

2. 建立一個網站

clip_image002[6]

3. 在工具箱新增一個Tab並命名

clip_image003[6]

clip_image004[6]

4. 點選選擇項目,載入時間有點久要等一下

clip_image005[6]

5. 瀏覽

clip_image006[6]

6. 加入DLL檔

clip_image007[6]

clip_image008[6]

7. 可以看到多很多控制項可以拉

clip_image009[6]

8. 先修改web.config,加入連線字串northwind

<add name="Northwind" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"
    providerName="System.Data.SqlClient" />

9. 新增一個網頁並拉一個toolkitscriptmanager

clip_image010[4]

記得這個控制項要在所有Ajax控制項的前面

clip_image012[4]

10. 新增一個網頁並拉一個textbox加入擴充項

clip_image013[4]

11. 選擇Auto Complete

clip_image014[4]

12. 修改vb檔


Partial Class Default2
    Inherits System.Web.UI.Page
    <System.Web.Services.WebMethodAttribute()> _
   <System.Web.Script.Services.ScriptMethodAttribute()> _
    Public Shared Function GetCompleteList(ByVal prefixText As String, _
ByVal count As Integer, ByVal contextKey As String) As String()

        Dim al As New List(Of String)
        '使用程式擷取資料庫
        Using cn As New SqlConnection(ConfigurationManager.ConnectionStrings("Northwind").ToString())
            cn.Open()
            '從customers取得產品名稱
            Dim cmd As New SqlCommand(" SELECT CompanyName FROM Customers where CompanyName like'" & prefixText & "%'", cn)
            Dim dr As SqlDataReader = cmd.ExecuteReader()
            If (dr.HasRows) Then
                While (dr.Read())
                    al.Add(dr("CompanyName").ToString())
                End While
            End If
        End Using
        Dim i As Integer = 0
        If (al.Count - 1 >= 0) Then
            i = al.Count - 1
        End If
        Dim str As String() = New String(i) {}

        For index As Integer = 0 To i
            str(index) = al(index)
        Next

        Return (str)
    End Function
End Class

13. 回到設計頁面檢視程式碼

clip_image016[4]

14. 選擇Auto Complete Extender的屬性視窗

clip_image018[6]

15. 修改屬性

Service Method:GetCompleteList

UseContextKey:True

MinimumPrefixLength:1

clip_image020[6]

clip_image021[4]

16. 編譯完成就可以看到結果了

clip_image022[4]

17. 加入動畫效果,解開sample的檔案可以找到東西

clip_image024[4]

clip_image026[4]

18. 開啟原始碼並複製<Animations>之間的tag

clip_image028[4]

19. 貼在這裡

clip_image030[4]

20. 修改屬性

BehaviorID:AutoCompleteEx

clip_image031[4]

clip_image032[4]

21. 重跑就有動畫效果了,想要改效果請調整<Animations>之間的屬性