AJAX实时搜索MySQLi查询不更新，始终显示无结果的问题排查

我仔细看了你的代码，发现几个核心问题导致搜索始终显示无结果，咱们一步步把这些问题理顺并修复：

问题分析 #

1. AJAX数据传递格式错误：你直接把输入框的值传给后端，但$_POST['filterName']需要键值对格式的数据，这导致后端根本拿不到搜索关键词，自然返回空结果。
2. 冗余的事件绑定：在searchEmpresa函数里重复绑定submit事件，不仅会导致多次触发请求，而且你是通过keyup实现实时搜索，完全不需要绑定表单提交事件。
3. 后端未输出结果HTML：buscador.php只执行了数据库查询，但没有把查询结果转换成前端能识别的HTML代码返回，AJAX拿到的是空内容。
4. 前端未正确利用AJAX返回值：你在success回调里又去请求原页面categorias.php，完全忽略了AJAX返回的搜索结果，这是逻辑上的本末倒置。
5. 严重的SQL注入风险：直接把用户输入的关键词拼进SQL语句里，这是非常危险的操作，很容易被恶意攻击。

修正后的完整代码 #

1. 前端AJAX代码（实时搜索逻辑） #

$(document).ready(function () {
    var timeoutID = null;
    $('#filterName').keyup(function (e) {
        clearTimeout(timeoutID);
        timeoutID = setTimeout(searchEmpresa.bind(undefined, e.target.value), 500);
    });

    function searchEmpresa(str) {
        console.log('搜索关键词: ' + str);
        // 直接发送AJAX请求，无需绑定表单提交事件
        $.ajax({
            method: "POST",
            url: 'buscador.php',
            // 传递键值对，确保后端能通过$_POST['filterName']获取值
            data: { filterName: str },
            success: function (data) {
                console.log('返回结果:', data);
                // 直接用返回的HTML替换结果容器内容
                $("#results").html(data);
            },
            error: function(xhr, status, error) {
                // 增加错误调试，方便排查问题
                console.error('AJAX请求出错:', error);
                $("#results").html("<h2 class='text-center'>搜索出错，请稍后重试!</h2>");
            }
        });
    }
})

2. 后端处理页面（buscador.php） #

<?php
require 'config.php';
session_start();

// 先校验必要参数是否存在
if(!isset($_SESSION['id']) || !isset($_POST['filterName'])){
    echo "<h2 class='text-center'>参数错误，请刷新页面重试!</h2>";
    exit;
}

$connection = new mysqli($servername, $username, $password, $db);
// 检查数据库连接状态
if ($connection->connect_error) {
    die("数据库连接失败: " . $connection->connect_error);
}

$id = $_SESSION['id'];
$filterName = $_POST['filterName'];

// 使用预处理语句防止SQL注入，这是必须的安全操作
$stmt = $connection->prepare("SELECT * FROM empresa WHERE categorias_id = ? AND menulogo IS NOT NULL AND nombre COLLATE UTF8_GENERAL_CI LIKE ?");
// 拼接模糊查询的通配符
$likePattern = "%".$filterName."%";
// 绑定参数：i表示整数类型，s表示字符串类型
$stmt->bind_param("is", $id, $likePattern);
$stmt->execute();
$result = $stmt->get_result();

// 输出搜索结果的HTML结构
echo '<div class="row index-margin">';
if ($result->num_rows == 0) {
    echo "<h2 class='text-center'>No hemos encontrado ningún resultado con esa busqueda!</h2><ul class='text-center'><li class='list-categorias'><a class='fa-categorias fa fa-refresh' href='categorias.php?id=$id'></a></li></ul>";
} else {
    while ($field = $result->fetch_assoc()) {
        ?>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 parent size">
            <a style="background-color:<?php echo htmlspecialchars($field['color']) ?>" href="profile.php?id=<?php echo $field['id'] ?>">
                <img src="/test<?php echo htmlspecialchars($field['menulogo']) ?>" class="logo img-grayscale">
                <div class="hover-item"><h5 class="label-profile"><?php echo htmlspecialchars($field['nombre']) ?></h5></div>
            </a>
        </div>
        <?php
    }
}
echo '</div>';

// 关闭数据库连接和预处理语句
$stmt->close();
$connection->close();
?>

3. 主页面（categorias.php）优化 #

保留初始加载的查询逻辑即可，AJAX会自动替换#results容器的内容：

<div class="container">
    <h2 class="title">Empresas De Confianza</h2>
    <div class="col-lg-12">
        <div class="col-lg-6 col-centered">
            <form method="POST" action="buscador.php" id="search">
                <input class="search-bar" type="text" name="filterName" id="filterName" placeholder="搜索企业...">
                <button type="submit" hidden></button>
            </form>
        </div>
    </div>
    <?php
    // 初始加载的默认查询
    $msqliquery = "SELECT * FROM empresa WHERE categorias_id = $id AND menulogo IS NOT NULL";
    $array = $connection->query($msqliquery);
    echo '<div class="row index-margin" id="results">';
    if (mysqli_num_rows($array) == 0) {
        echo "<h2 class='text-center'>暂无企业数据!</h2>";
    };
    while ($field = mysqli_fetch_array($array)) {
        ?>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 parent size">
            <a style="background-color:<?php echo htmlspecialchars($field['color']) ?>" href="profile.php?id=<?php echo $field['id'] ?>">
                <img src="/test<?php echo htmlspecialchars($field['menulogo']) ?>" class="logo img-grayscale">
                <div class="hover-item"><h5 class="label-profile"><?php echo htmlspecialchars($field['nombre']) ?></h5></div>
            </a>
        </div>
        <?php
    }
    echo '</div>'
    ?>
</div>

修复要点说明 #

• 传递正确的AJAX数据格式，确保后端能获取到搜索关键词
• 后端使用预处理语句彻底避免SQL注入风险
• 直接用AJAX返回的HTML更新结果容器，不再重复请求原页面
• 去掉冗余的事件绑定，简化搜索逻辑
• 增加错误处理，提升用户体验和调试效率

内容的提问来源于stack exchange，提问作者Serrano