¿Limitar resultados de buscador asincrono?

[kukiko11]

Me esta suponiendo todo un reto poder compaginar un buscador asincrono junto con el famoso boton 'cargar mas' para poder limitar en cierto modo la muestra de resultados, ya que si no incorporo ese boton cuando el usuario busque una palabra que coincida con unos mil resultados (por ejemplo) el scroll podria hacerse interminable

Estoy intentando hacerlo con jquery php y por supuesto el html, aca lo que tengo hasta ahora:

HTML:

Código 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:

Código 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";
}    
?>
 

JQUERY-JS:

Código Javascript:

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

Pero no funciona adecuadamente, el boton no esta leyendo bien el final de los resultados (cuando ya no hay mas para mostrar) a la vez que imprime cosas que no estan dentro del bucle while php (que arroja los resultados)... espero puedan ayudarme u.u