jquery如何成功实现输入关键字查询功能

发布时间：2023-08-11 11:30:20 所属栏目：教程来源：网络

导读： 　　本篇内容主要讲解“jquery如何实现输入关键字查询功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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);

　　            }

　　        });

　　    });

　　});

（编辑：吕梁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!