JQuery是目前應用最廣泛的JavaScript庫之一，它為我們提供了許多現成的API以及許多開發和封裝工具，可以大大簡化我們的開發工作。本文將介紹如何使用JQuery輸入關鍵字查詢。
一、前置準備
在使用JQuery的輸入關鍵字查詢之前，我們需要在html檔案中引入JQuery庫文件，可以透過以下網址下載：
https://jquery.com/download/
同時，我們需要新增一個輸入框和一個查詢按鈕，程式碼如下：
<label for="keyword">请输入关键字：</label> <input type="text" id="keyword"> <button id="search">查询</button>
二、使用JQuery實作輸入關鍵字查詢
首先，在html檔案中加入一個table用來展示查詢結果。
<table id="resultTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody></tbody> </table>
接著，在JavaScript檔案中使用JQuery的事件監聽器，當查詢按鈕被點擊時，取得輸入框中的關鍵字，然後透過JQuery的AJAX請求，將查詢結果顯示在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是後台處理資料的文件，我們需要在後台根據輸入的關鍵字進行資料查詢並傳回查詢結果。
三、完整程式碼
HTML檔：
<label for="keyword">请输入关键字：</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輸入關鍵字查詢的實作方法，透過使用JQuery和AJAX請求，我們可以方便地完成輸入關鍵字查詢功能，大大提高了我們的開發效率。值得注意的是，在實際使用中，我們需要根據實際情況進行一些資料驗證和過濾等操作，以防止SQL注入等安全性問題。
以上是jquery怎麼實作輸入關鍵字查詢功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
