jquery怎麼實作輸入關鍵字查詢功能

JQuery是目前應用最廣泛的Ja​​vaScript庫之一，它為我們提供了許多現成的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中文網其他相關文章！