Step 1.先準備要查詢的功能網頁，資料表不變(不知道是什麼看前篇)，此網頁我叫它getData2.aspx，一樣前端就一行程式碼，以下是後端程式碼，跟前篇的一樣，但只改Select指令。
Imports System.Data
Imports System.Data.SqlClient
Imports Newtonsoft.Json
Imports UControls.cswfunclass
Partial Class getData2
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 cname as f1,id_no as f2,address1 as addr,email as mail 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
說明紅色的部分
待會我將帶出f1,f2,addr,mail資料，顯示到我要的介面上
Step 2.在新增一個aspx網頁，命名為：test_bootcomplete2
Step 3.將jquery.bootcomplete.js程式碼複製一份到test_bootcomplete2.aspx網頁中，沒有再額外建立js檔，如下：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_bootcomplete2.aspx.vb" Inherits="test_bootcomplete2" %>
<!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 bootcomplete2</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.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]-->
<script type="text/javascript">
(function ($) {
$.fn.bootcomplete_new1 = function (options) {
var defaults = {
url: "/search.php",
method: 'get',
wrapperClass: "bc-wrapper",
menuClass: "bc-menu",
idField: true,
idFieldName: $(this).attr('name') + "_id",
minLength: 3,
dataParams: {},
formParams: {},
mainDBField:'NULL',
otherFieldID: false,
arrFieldID: [],
arrDBField: []
};
var settings = $.extend({}, defaults, options);
$(this).attr('autocomplete', 'off');
//載入之後,在原本TextBox再包一層div
$(this).wrap('<div class="' + settings.wrapperClass + '"></div>');
/** //不曉得原作者的用意
if (settings.idField) {
if ($(this).parent().parent().find('input[name="' + settings.idFieldName + '"]').length !== 0) {
//use existing id field
} else {
//there is no existing id field so create one
$('<input type="hidden" name="' + settings.idFieldName + '" value="">').insertBefore($(this));
};
};
*/
//載入之後,insertAfter在目前的元素(一開始的元素是TextBox)後面插入div
$('<div class="' + settings.menuClass + ' list-group"></div>').insertAfter($(this));
$('div[class="' + settings.menuClass + ' list-group"]').hide(); //載入後隱藏
$(this).on("keyup", searchQuery);
$(this).on("focusout", hideThat);
var xhr;
var that = $(this);
function hideThat() {
if ($('.list-group-item' + ':hover').length) {
return;
};
$(that).next('.' + settings.menuClass).hide();
};
function searchQuery() {
var arr = [];
$.each(settings.formParams, function (k, v) {
arr[k] = $(v).val();
});
var dyFormParams = $.extend({}, arr);
var Data = $.extend({ query: $(this).val() }, settings.dataParams, dyFormParams);
if (!Data.query) {
$(this).next('.' + settings.menuClass).html('');
$(this).next('.' + settings.menuClass).hide();
};
if (Data.query.length >= settings.minLength) {
if (xhr && xhr.readyState != 4) {
xhr.abort();
};
xhr = $.ajax({
type: settings.method,
url: settings.url,
data: Data,
dataType: "json",
success: function (json) {
var str_datahtml=''; //產生html屬性
var results = '';
$.each(json, function (i, j) {
str_datahtml = '';
//兜出自己想要的資料，這邊要加上自己要顯示的欄位，例如sql指令欄位有f1、f2、addr、mail，就必須加上data-f1、data-f2、data-addr、data-mail
for (var i = 0; i < settings.arrDBField.length; i++) {
str_datahtml = str_datahtml + 'data-' + settings.arrDBField[i] + '="' + j[settings.arrDBField[i]] + '" ';
};
str_datahtml = str_datahtml + 'data-' + settings.mainDBField + '="' + j[settings.mainDBField] + '" ';
results += '<a href="#" class="list-group-item" ' + str_datahtml + '>' + j[settings.mainDBField] + '</a>';
});
$(that).next('.' + settings.menuClass).html(results);
$(that).next('.' + settings.menuClass).children().on("click", selectResult);
$(that).next('.' + settings.menuClass).show();
}
});
};
};
function selectResult() {
$(that).val($(this).data(settings.mainDBField));
//otherFieldID=true代表要將資料填入到其它欄位
if (settings.otherFieldID) {
for (var i = 0; i < settings.arrFieldID.length; i++) {
$('input[id="' + settings.arrFieldID[i] + '"]').val($(this).data(settings.arrDBField[i]));
};
};
/** //不曉得原作者的用意
if (settings.idField) {
if ($(that).parent().parent().find('input[name="' + settings.idFieldName + '"]').length !== 0) {
//use existed id field
$(that).parent().parent().find('input[name="' + settings.idFieldName + '"]').val($(this).data(settings.mainDBField));
//ensure we trigger the onchange so we can do stuff
$(that).parent().parent().find('input[name="' + settings.idFieldName + '"]').trigger('change');
} else {
//use created id field
$(that).prev('input[name="' + settings.idFieldName + '"]').val($(this).data(settings.mainDBField));
//ensure we trigger the onchange so we can do stuff
$(that).prev('input[name="' + settings.idFieldName + '"]').trigger('change');
};
};
*/
$(that).next('.' + settings.menuClass).hide();
return false;
};
return this;
};
}(jQuery));
</script>
</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_new1({
idField:false,
url: 'getData2.aspx',
minLength: 1,
method: 'post',
dataParams: {
'k': '1'
},
mainDBField:'f1',
otherFieldID: true,
arrFieldID: ['<%=TB_iden.ClientID%>', '<%=TB_email.ClientID%>', '<%=TB_addr.ClientID%>'],
arrDBField: ['f2', 'addr', 'mail']
});
</script>
</div>
<div class="col-xs-12">
<asp:Label ID="L_iden" runat="server" Text="身分證字號" Font-Size="X-Large" AssociatedControlID="TB_iden"></asp:Label>
<asp:TextBox ID="TB_iden" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-xs-12">
<asp:Label ID="L_email" runat="server" Text="信箱" Font-Size="X-Large" AssociatedControlID="TB_email"></asp:Label>
<asp:TextBox ID="TB_email" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-xs-12">
<asp:Label ID="L_addr" runat="server" Text="地址" Font-Size="X-Large" AssociatedControlID="TB_addr"></asp:Label>
<asp:TextBox ID="TB_addr" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
</form>
</body>
</html>
說明紅色的部分
bootcomplete_new1：我將原本的套件bootcomplete，重新修改它的名子為bootcomplete_new1。
mainDBField、otherFieldID、arrFieldID、arrDBField：這幾個參數是我額外自己加上去的，mainDBField設定主要的欄位也就是f1要填回原本的TextBox欄位、otherFieldID是否有其他的欄位要填入資料、arrFieldID其他的欄位ID名稱、arrDBField其他資料庫資料表的欄位名稱也就是f2,addr,mail；arrFieldID與arrDBField參數必須要一致，資料才能順利填到我們要的位置。
以上我有將一些說明寫在註解裡，也有把一些原作者的語法註解掉，可能原作者還在開發或修改階段，所以不清楚他的用意，以上如有錯誤請指正，謝謝。
沒有留言:
張貼留言