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

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);
});
};

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

希望你们能帮帮我：C

Answer 1

您总是将结果放入#result，删除#result 内容。 你可以：

• 附加结果：$('#result').append(mensage) 或 $('#result')[0].innerHTML+=mensage 或 $('<div>').html(mebsaje).appendTo('#result')

• 添加结果：$('<div class=".result">').html(mebsaje).insertBefore('#result')（#result 总是在最后一个之后）

• 移动 ID：$("#result").html(mensaje).removeAttr('id').addClass('.result').after('<div id="result">')