jQuery自动补全仅显示JSON数组最后一项问题求助

你的搜索建议仅显示最后一项，核心问题出在PHP代码的输出逻辑上：

1. 循环过程中每次都生成完整的<ul id="country-list">，每次循环都会覆盖之前的列表，最终页面仅保留最后一次循环生成的<ul>（仅含单条数据）。
2. 循环结束后额外输出json_encode($result)，导致返回内容是HTML+JSON混合，既干扰正常显示，且$result此时仅为最后一条查询结果。

1. 修改PHP代码（readCountry.php） #

调整输出逻辑，先收集所有结果，再一次性生成完整的列表：

<?php
include '../classes/conn.php';  
$keyword = $_POST['keyword'];
$keyword = '%'.$keyword.'%';

$stmt = $conn->prepare(
    'SELECT app_fName FROM ia_application.kpp_comments WHERE app_fName LIKE :keyword'
);
$stmt->execute(array(':keyword' => $keyword));

// 一次性获取所有结果
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
if (!empty($results)) {
    echo '<ul id="country-list">';
    foreach ($results as $result) {
        // 转义特殊字符，避免JS函数报错
        $name = htmlspecialchars($result["app_fName"], ENT_QUOTES);
        echo "<li onClick=\"selectCountry('$name');\">$name</li>";
    }
    echo '</ul>';
} else {
    // 无匹配结果时给出提示
    echo '<p>无匹配结果</p>';
}
// 移除多余的json_encode输出
?>

2. 前端代码优化（可选） #

添加空值判断避免无效请求，同时完善异常处理：

$(document).ready(function() {
    $("#search-box").keyup(function() {
        var keyword = $(this).val().trim();
        // 输入为空时隐藏建议框，不发送请求
        if (keyword === "") {
            $("#suggesstion-box").hide();
            $("#search-box").css("background", "#FFF");
            return;
        }

        $.ajax({
            type: "POST",
            url: "readCountry.php",
            data: 'keyword=' + keyword,
            beforeSend: function() {
                $("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
            },
            success: function(data) {
                $("#suggesstion-box").show();
                $("#suggesstion-box").html(data);
                $("#search-box").css("background", "#FFF");
            },
            error: function() {
                $("#suggesstion-box").html('<p>加载失败，请重试</p>');
                $("#search-box").css("background", "#FFF");
            }
        });
    });
});

function selectCountry(val) {
    $("#search-box").val(val);
    $("#suggesstion-box").hide();
}

• PHP中用fetchAll一次性获取所有结果，在单个<ul>内循环生成<li>，确保所有匹配项显示在同一列表中。
• 使用htmlspecialchars转义输出内容，避免因名称含引号导致JS函数报错。
• 移除多余的json_encode输出，保证返回内容为纯HTML，前端可直接正确渲染。

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