參考資料：Demo jquery.bootcomplete.js
說說這個禮拜作了什麼...最近在使用ASP.NET WebForm加上Bootstrap達到響應式，因要讓使用者在TextBox上輸入關鍵字時，可以搜尋出相關的資料，就像是Google在搜尋資料的時候也會跑出關鍵字，這就叫作自動完成功能，先前自己也有紀錄過一篇jquery autocomplete自動完成，但這次因為有加上Bootstrap，想說應該介面上有什麼不一樣的地方，所以就上Google key入了bootstrap autocomplete關鍵字，就找到了jquery.bootcomplete.js別人寫好的jquery套件(別人寫好的我都稱它為套件)。
好...發這篇主要是紀錄過程，將來如果有同樣的需求，可以趕快的恢復遺忘的記憶....
Step 1.先介紹待會會用到的資料表，就一個資料表，稱它為會員(test_member)資料表
Step 2.首先先作好使用者介面，此網頁為test_bootcomplete.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_bootcomplete.aspx.vb" Inherits="test_bootcomplete" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>test bootcomplete</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.bootcomplete.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<asp:Label ID="L_cname" runat="server" Text="請輸入要查詢的姓名" Font-Size="X-Large" AssociatedControlID="TB_cname"></asp:Label>
<asp:TextBox ID="TB_cname" runat="server" CssClass="form-control"></asp:TextBox>
<script type="text/javascript">
$('#<%=TB_cname.ClientID%>').bootcomplete({
url: 'getData.aspx',
minLength: 2,
method: 'post',
dataParams: {
'k': '1'
}
});
</script>
</div>
</div>
</div>
</form>
</body>
</html>
說明紅色的部分：
url 希望傳到哪一個網頁幫我們作查詢。
minLength 最少輸入幾個字，才幫我們作查詢。
method 使用什麼方式傳給另外一個網頁，就像form的get、post。
dataParams 我們可以額外帶參數給另外一個網頁，此參數為k，k的資料為1。
如果有使用過jquery ajax應該就會知道怎麼使用。
畫面結果：
Step 3.製作getData.aspx網頁
getData.aspx前端的網頁只留一行
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="getData.aspx.vb" Inherits="getData" %>
getData.aspx.vb後置程式碼
Imports System.Data
Imports System.Data.SqlClient
Imports Newtonsoft.Json
Partial Class getData
Inherits System.Web.UI.Page
Dim str_sql As String = String.Empty
Private Sub getData_Load(sender As Object, e As EventArgs) Handles Me.Load
'進到getData.aspx最好作個身分驗證，免得重要資訊外流
If Not Page.IsPostBack Then
'第一次進入
Dim str_rdata As StringBuilder = Nothing
If (Not Request("k") Is Nothing) Then
If Request("k").ToString = "1" Then
Dim str_query As String = String.Empty
If (Not Request("query") Is Nothing) Then
str_query = Request("query").ToString
End If
str_rdata = New StringBuilder()
Dim def_ds As New DataSet()
str_sql = "select id_no as id,cname as label from test_member where cname like @cname+'%'"
Using conn As New SqlConnection("Server=127.0.0.1;uid=test;pwd=test;Database=test1")
Using command As SqlCommand = New SqlCommand(str_sql, conn)
'避免 SQL Injection（資料隱碼）攻擊
If command.Parameters.Contains("@cname") Then
command.Parameters("@cname").Value = str_query
Else
command.Parameters.AddWithValue("@cname", str_query) '讓ADO.NET自行判斷型別轉換
End If
Using da As New SqlDataAdapter()
da.SelectCommand = command
da.Fill(def_ds)
End Using
End Using
End Using
str_rdata.Append(JsonConvert.SerializeObject(def_ds.Tables(0), Formatting.Indented))
Response.Write(str_rdata.ToString)
def_ds.Clear() : def_ds.Dispose()
Else
Response.Write("[]")
End If
Else
Response.Write("[]")
End If
End If
End Sub
End Class
注意：程式碼中有使用到Newtonsoft.Json套件
說明紅色的部分：
Request("k") 是剛才在test_bootcomplete.aspx，所帶入的k參數。
Request("query") query是什麼呢? 這個是 jquery.bootcomplete.js它使用的參數，也就是當使用者在TextBox輸入關鍵字帶給getData.aspx的參數值，它已經預設好名稱叫query，所以在js檔中可以找到query這個參數，請各位去開啟 jquery.bootcomplete.js檔案，圖解如下。
SQL指令中的id_no as id,cname as label，是什麼意思呢? 這個也是在 jquery.bootcomplete.js會用到的參數，會把搜尋出來的結果呈現給使用者看，也就是會跟TextBox有所關聯。
執行結果：
這雖然是別人寫的套件，但我覺得可以從中學習到一些技巧，以上如果有錯誤請指正，因為是用自己的方法去理解，所以可能有些地方不正確，還請多多指教。
沒有留言:
張貼留言