如何在异步搜索期间添加“加载更多”按钮？

Question

我有这个小问题...当我在我的网站上搜索任何内容时，结果会在键入时异步显示...独奏如果我要求的单词有类似我不知道的东西...100个结果，所有结果都会出现，页面的滚动会太长，所以我需要一些按钮，允许我10 x 10（或类似的东西）加载结果

这是我到目前为止所做的代码。。。

HTML：

<input type="text" id="busqueda"  name="busqueda" value="" required autocomplete="off" onKeyUp="search();">
<div id="result"></div>
<button id="loadmore" hidden="hidden" name="loadmore"> load more</button> 

<script type="text/javascript">
    var track_page = 1; //track user click as page number, righ now page number 1
</script>

PHP：

<?php
//Archivo de conexión a la base de datos
require('db_conexion.php');

$consultaBusqueda = $_POST['valorBusqueda'];


if (isset($consultaBusqueda)) {

//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
  header('HTTP/1.1 500 Invalid page number!');
  exit();
}
//capacity
$item_per_page = 5;

//get current starting point of records
$position = (($page_number-1) * $item_per_page);

//query
$buscar= $conexion->query("SELECT info from table ORDER BY id DESC LIMIT $position,$item_per_page");

//conditionals
    if (!$query_execute->num_rows) {
        $mensaje = "no results";
    }else{
        $filas= $query_execute->num_rows;
        echo $filas.' Results for <mark>'.$consultaBusqueda.'</mark>';

//show results 
while($row = $buscar->fetch_array()) {

            $variables="something";      
            echo $variables;
        }
    } 
}else{
echo "Error";
}    
?>

JS公司：

function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;


$(document).ready(function() {
    $("#result").html('<p> </p>');
    var track_page = 1; //track user click as page number, righ now page number 1
});

function search() {
     var textoBusqueda = $("input#busqueda").val();

     if (textoBusqueda != "") {
        $("#result").show();
        $(".close").show();
        $("#loadmore").show();
        $.post("actions/buscar.php", {valorBusqueda: textoBusqueda, 'page': track_page}, function(mensaje) {
              if(mensaje.trim().length == 0){
       $("#loadmore").hide();
      //display text and disable load button if nothing to load
      $("#loadmore").text("No hay mas resultados que mostrar").prop("disabled", true);
    }
      //load the result
      $("#result").html(mensaje);
        //scroll page to button element
      $("html, body").animate({scrollTop: $("#loadmore").offset().bottom}, 100);

         }); 
     } else { 
        $("#loadmore").hide();
        $(".close").hide();
        $("#result").html('<p> </p>');
        };

     //load more results
     $("#loadmore").click(function (e) { //user clicks on button
     track_page++; //page number increment everytime user clicks load button
     search(track_page);
});
};

但我还不能让它正常工作。。。因为ok；我搜索了一些东西，我得到了前10个结果，但是。。。当我点击“加载更多”按钮时，旧的十个结果被下一个结果替换，而不是按顺序排列的20个结果，所以。。。

希望你们能帮到我

Answer 1

您总是将结果放入“结果”中，擦除“结果”内容。您可以：

>

前置结果：<代码>$（'

移动id：<代码>$（“#结果”）。html（mensaje）。removeAttr（'id'）。addClass（“.result”）。之后（'