PHP前端搜索功能实现：仅显示数据库对应行内容

由 ChatGPT4o 使用 ChatGPT 4o 回答

问题：

以下php内容是查询SQL数据库的，现在需要再前端加入搜索功能，要求只显示数据库中，对应行的内容，不显示其他内容

<?php // 引入数据库连接文件 include 'db.php'; // SQL 查询语句 $sql = "SELECT id, time, IP, info, WXDJ, GSD, PIC, AQSB, up_time, beizhu FROM black_list"; $result = $conn->query($sql); // 检查查询结果 if ($result->num_rows > 0) { // 输出表格头部 echo '<table class="table table-bordered">'; echo '<thead>'; echo '<tr>'; echo '<th>ID</th>'; echo '<th>Time</th>'; echo '<th>IP</th>'; echo '<th>Info</th>'; echo '<th>WXDJ</th>'; echo '<th>GSD</th>'; echo '<th>PIC</th>'; echo '<th>AQSB</th>'; echo '<th>Up Time</th>'; echo '<th>Beizhu</th>'; echo '</tr>'; echo '</thead>'; echo '<tbody>'; // 输出每一行数据 while($row = $result->fetch_assoc()) { echo '<tr>'; echo '<td>' . $row['id'] . '</td>'; echo '<td>' . $row['time'] . '</td>'; echo '<td>' . $row['IP'] . '</td>'; echo '<td>' . $row['info'] . '</td>'; echo '<td>' . $row['WXDJ'] . '</td>';
回答：

要在前端加入搜索功能，并只显示数据库中对应行的内容，可以使用HTML表单和JavaScript来实现。以下是一个示例，展示如何在前端添加搜索功能，并根据用户输入过滤显示的内容。

首先，修改PHP代码以支持搜索功能：

<?php
// 引入数据库连接文件
include 'db.php';

// 获取搜索关键字
$search = isset($_GET['search']) ? $_GET['search'] : '';

// SQL 查询语句
$sql = "SELECT id, time, IP, info, WXDJ, GSD, PIC, AQSB, up_time, beizhu FROM black_list";
if ($search) {
    $sql .= " WHERE id LIKE '%$search%' OR time LIKE '%$search%' OR IP LIKE '%$search%' OR info LIKE '%$search%' OR WXDJ LIKE '%$search%' OR GSD LIKE '%$search%' OR PIC LIKE '%$search%' OR AQSB LIKE '%$search%' OR up_time LIKE '%$search%' OR beizhu LIKE '%$search%'";
}
$result = $conn->query($sql);

// 检查查询结果
if ($result->num_rows > 0) {
    // 输出表格头部
    echo '<table class="table table-bordered">';
    echo '<thead>';
    echo '<tr>';
    echo '<th>ID</th>';
    echo '<th>Time</th>';
    echo '<th>IP</th>';
    echo '<th>Info</th>';
    echo '<th>WXDJ</th>';
    echo '<th>GSD</th>';
    echo '<th>PIC</th>';
    echo '<th>AQSB</th>';
    echo '<th>Up Time</th>';
    echo '<th>Beizhu</th>';
    echo '</tr>';
    echo '</thead>';
    echo '<tbody>';

    // 输出每一行数据
    while($row = $result->fetch_assoc()) {
        echo '<tr>';
        echo '<td>' . $row['id'] . '</td>';
        echo '<td>' . $row['time'] . '</td>';
        echo '<td>' . $row['IP'] . '</td>';
        echo '<td>' . $row['info'] . '</td>';
        echo '<td>' . $row['WXDJ'] . '</td>';
        echo '<td>' . $row['GSD'] . '</td>';
        echo '<td>' . $row['PIC'] . '</td>';
        echo '<td>' . $row['AQSB'] . '</td>';
        echo '<td>' . $row['up_time'] . '</td>';
        echo '<td>' . $row['beizhu'] . '</td>';
        echo '</tr>';
    }
    echo '</tbody>';
    echo '</table>';
} else {
    echo '没有找到匹配的记录。';
}
?>

然后，在HTML中添加搜索表单和JavaScript代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>搜索功能</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>黑名单列表</h1>
        <form method="GET" action="">
            <div class="form-group">
                <label for="search">搜索:</label>
                <input type="text" class="form-control" id="search" name="search" placeholder="输入搜索关键字">
            </div>
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
        <br>
        <?php include 'your_php_file.php'; ?>
    </div>
</body>
</html>

在这个示例中，用户可以在搜索框中输入关键字，然后点击“搜索”按钮。表单会将搜索关键字通过GET请求发送到服务器，PHP脚本会根据关键字过滤数据库中��记录，并显示匹配的结果。