[ASP.NET]實現自動搜索功能
上課教到類似google的自動搜索功能
實作一下順便記憶
1. 下載ajax control toolkit
http://ajaxcontroltoolkit.codeplex.com/releases/view/43475
範例網站
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
2. 建立一個網站
3. 在工具箱新增一個Tab並命名
4. 點選選擇項目,載入時間有點久要等一下
5. 瀏覽
6. 加入DLL檔
7. 可以看到多很多控制項可以拉
8. 先修改web.config,加入連線字串northwind
<add name="Northwind" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"
providerName="System.Data.SqlClient" />
9. 新增一個網頁並拉一個toolkitscriptmanager
記得這個控制項要在所有Ajax控制項的前面
10. 新增一個網頁並拉一個textbox加入擴充項
11. 選擇Auto Complete
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. 回到設計頁面檢視程式碼
14. 選擇Auto Complete Extender的屬性視窗
15. 修改屬性
Service Method:GetCompleteList
UseContextKey:True
MinimumPrefixLength:1
16. 編譯完成就可以看到結果了
17. 加入動畫效果,解開sample的檔案可以找到東西
18. 開啟原始碼並複製<Animations>之間的tag
19. 貼在這裡
20. 修改屬性
BehaviorID:AutoCompleteEx
21. 重跑就有動畫效果了,想要改效果請調整<Animations>之間的屬性