Ajax jQuery实时搜索添加更多结果按钮跳转新页展示全量结果问题

修复HTML冗余问题 #

你的搜索输入框重复定义了name属性，先清理冗余保证表单参数传递正确：

<form action="./s/" method="GET">
<div class="searchbox">
    
    <!-- SEARCHBOX INPUT -->
    <!-- 删掉重复的name="name"，只保留name="s" -->
    <input type="text" name="s" class="searchbox-input" placeholder="Search trough 1,000 games in our database.." />

    <div class="searchbox-line"></div>
    <div class="searchbox-icon">
        <input class="img-searchbox-icon" name="" value="" type="submit">
    </div>

    <div class="results"></div>

</div>
</form>

修改后端PHP逻辑，新增「更多结果」按钮 #

在遍历完5条实时搜索结果后，判断如果结果数等于5（说明还有更多匹配结果未展示），直接输出带当前搜索词的跳转链接即可，不需要额外加提交按钮，完全规避之前的参数错误问题：

if(isset($_REQUEST["term"])){
    // Prepare a select statement
    $sql = "SELECT * FROM games WHERE name LIKE ? ORDER BY name LIMIT 5";
    
    if($stmt = mysqli_prepare($link, $sql)){
        // Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($stmt, "s", $param_term);
        
        // Set parameters
        $param_term = '%' . $_REQUEST["term"] . '%';
        
        // Attempt to execute the prepared statement
        if(mysqli_stmt_execute($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            $result_count = mysqli_num_rows($result);
            
            // Check number of rows in the result set
            if($result_count > 0){
                // Fetch result rows as an associative array
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){ 
                    echo '<a href="' . $row["url"] . '">';
                    echo '<p class="results-name">' . $row["name"] . '</a></p>';

                    echo '<p class="results-platform">';
                    echo '<img class="platform" src="img/platform-icons/' . $row["platform1"] . '.png" />';
                    echo '<img class="platform" src="img/platform-icons/' . $row["platform2"] . '.png" />';
                    echo '<img class="platform" src="img/platform-icons/' . $row["platform3"] . '.png" />';
                    echo '<img class="platform" src="img/platform-icons/' . $row["platform4"] . '.png" />';
                    echo '<img class="platform" src="img/platform-icons/' . $row["platform5"] . '.png" />';
                    echo '<img class="platform" src="img/platform-icons/' . $row["platform6"] . '.png" />';
                    echo '</p>';
                }
                // 新增：有更多结果时展示跳转按钮
                if($result_count == 5){
                    $search_term = urlencode($_REQUEST["term"]);
                    echo "<a href='./s/?s={$search_term}' class='more-results-btn'>更多结果</a>";
                }
            } else{
                echo '<p class="results-gamename">No matches found</p>';
            }
        } else{
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }
    }
    // 记得补上原代码遗漏的资源关闭逻辑
    mysqli_stmt_close($stmt);
}

全量结果页开发 #

在你跳转的./s/对应页面中，接收GET参数s，执行不带LIMIT限制的查询即可拿到所有匹配结果：

if(isset($_GET["s"])){
    $sql = "SELECT * FROM games WHERE name LIKE ? ORDER BY name";
    // 后续绑定参数、执行查询、渲染结果的逻辑和实时搜索接口一致即可
}

你之前加提交按钮出现参数错误，是因为按钮插入位置不对、或者按钮带了额外的value属性覆盖了输入框的内容，直接用拼接好参数的跳转链接可以完全规避这个问题，也不会和你现有的Ajax实时搜索逻辑产生冲突。

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