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如何实现输入关键字查询功能”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！