jquery如何實現輸入關鍵字查詢功能

本篇內容主要講解“jquery如何實現輸入關鍵字查詢功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jquery如何實現輸入關鍵字查詢功能”吧!

一、前置準備

在使用JQuery的輸入關鍵字查詢之前，我們需要在html文件中引入JQuery庫文件

同時，我們需要添加一個輸入框和一個查詢按鈕，代碼如下：

<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如何實現輸入關鍵字查詢功能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！