javascript - ¿如何在异步搜索过程中添加 'load more'按钮？

Question

我有一个小问题...当我在网站上搜索任何内容时，结果会在键入时异步显示...单独，如果我要求的单词有类似“我不知道”的内容... 100结果，所有结果都会出现，并且页面滚动会太长，所以我需要一些按钮来允许我加载结果 10 by 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">')