¿非同期検索中に[もっと読み込み]ボタンを追加するにはどうすればよいですか？

Question

私はこの小さな問題を抱えています...私のウェブサイト上で何かを検索すると、結果は非同期的に表示されます...ソロもし私が求めている言葉はわかりません。すべての結果が表示され、ページのスクロールが長すぎるため、結果10を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の結果を得たが、その後、私は 'もっと読み込み'ボタンをクリックすると、次のものに置き換えられた古い10の結果が得られ、そう...

はあなたが私人を助けることができる願っています：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">')