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:
Ver original<input type="text" id="busqueda" name="busqueda" value="" required autocomplete="off" onKeyUp="search();"> <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
PHP:
Código PHP:
Ver original<?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
header('HTTP/1.1 500 Invalid page number!'); }
//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
:
Ver originalfunction 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