您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“jquery如何實現(xiàn)輸入關(guān)鍵字查詢功能”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“jquery如何實現(xiàn)輸入關(guān)鍵字查詢功能”吧!
一、前置準備
在使用JQuery的輸入關(guān)鍵字查詢之前,我們需要在html文件中引入JQuery庫文件
同時,我們需要添加一個輸入框和一個查詢按鈕,代碼如下:
<label for="keyword">請輸入關(guān)鍵字:</label>
<input type="text" id="keyword">
<button id="search">查詢</button>
二、使用JQuery實現(xiàn)輸入關(guān)鍵字查詢
首先,在html文件中添加一個table用于展示查詢結(jié)果。
<table id="resultTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody></tbody>
</table>
接著,在JavaScript文件中使用JQuery的事件監(jiān)聽器,當查詢按鈕被點擊時,獲取輸入框中的關(guān)鍵字,然后通過JQuery的AJAX請求,將查詢結(jié)果展示在table中。
$(document).ready(function() {
$("#search").click(function() {
var keyword = $.trim($("#keyword").val());
$.ajax({
type: "GET",
url: "search.php",
data: {
keyword: keyword
},
dataType: "json",
success: function(data) {
var tr = "";
$.each(data, function(index, value) {
tr += "<tr>";
tr += "<td>" + value.name + "</td>";
tr += "<td>" + value.age + "</td>";
tr += "<td>" + value.gender + "</td>";
tr += "</tr>";
});
$("tbody").empty().append(tr);
}
});
});
});
其中,search.php是后臺處理數(shù)據(jù)的文件,我們需要在后臺根據(jù)輸入的關(guān)鍵字進行數(shù)據(jù)查詢并返回查詢結(jié)果。
三、完整代碼
HTML文件:
<label for="keyword">請輸入關(guān)鍵字:</label>
<input type="text" id="keyword">
<button id="search">查詢</button>
<table id="resultTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody></tbody>
</table>
JavaScript文件:
$(document).ready(function() {
$("#search").click(function() {
var keyword = $.trim($("#keyword").val());
$.ajax({
type: "GET",
url: "search.php",
data: {
keyword: keyword
},
dataType: "json",
success: function(data) {
var tr = "";
$.each(data, function(index, value) {
tr += "<tr>";
tr += "<td>" + value.name + "</td>";
tr += "<td>" + value.age + "</td>";
tr += "<td>" + value.gender + "</td>";
tr += "</tr>";
});
$("tbody").empty().append(tr);
}
});
});
});
到此,相信大家對“jquery如何實現(xiàn)輸入關(guān)鍵字查詢功能”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。