How to implement the input keyword query function in jquery

JQuery is one of the most widely used JavaScript libraries currently. It provides us with many ready-made APIs and many development and packaging tools, which can greatly simplify our development work. This article will introduce how to use JQuery to enter keyword queries.

1. Preparation

Before using JQuery’s input keyword query, we need to introduce the JQuery library file into the html file, which can be downloaded through the following URL:

https://jquery.com/download/

At the same time, we need to add an input box and a query button, the code is as follows:

<label for="keyword">请输入关键字：</label>
<input type="text" id="keyword">
<button id="search">查询</button>

2. Use JQuery to implement input keyword query

First, add a table to the html file to display the query results.

<table id="resultTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Next, use JQuery's event listener in the JavaScript file. When the query button is clicked, get the keywords in the input box, and then display the query results in the table through JQuery's AJAX request.

$(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);
            }
        });
    });
});

Among them, search.php is the file for background processing data. We need to perform data query based on the entered keywords in the background and return the query results.

3. Complete code

HTML file:

<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 file:

$(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);
            }
        });
    });
});

4. Summary

The above is the JQuery input key The implementation method of word query, by using JQuery and AJAX request, we can easily complete the input keyword query function, which greatly improves our development efficiency. It is worth noting that in actual use, we need to perform some data verification and filtering operations based on the actual situation to prevent security issues such as SQL injection.

The above is the detailed content of How to implement the input keyword query function in jquery. For more information, please follow other related articles on the PHP Chinese website!