I'm doing a personal blog and recently have stopped because of this little problem... is being a challenge to me to figure it out so... I hope you could help me guys
What I want to do is; put some kind of limit to the results I obtain while searching, and that's because these results are loaded asynchronously while typing, so... if I search for something that has over 100 results (for example) the scroll will be just too long, so what I'd like to do is make appear some kind of 'load more button' that allows the user to load more results if he wants to.. how could I do that?
Here's the code I have done so far...
HTML:
<input type="text" id="busqueda" name="busqueda" value="" required autocomplete="off" onKeyUp="search();">
<div id="result"></div>
<button id="loadmore"> load more</button>
PHP:
<?php
//connect to db
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()) {
$variable="something";
echo $variable;
}
}
}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;
function search() {
var textoBusqueda = $("input#busqueda").val();
if (textoBusqueda != "") {
$("#resultadoBusqueda").show();
$.post("actions/search.php", {valorBusqueda: textoBusqueda}, function(menssage) {
$("#resultadoBusqueda").html(menssage);
});
} else {
$("#resultadoBusqueda").html("");
};
};
Here you have the page so you can see how is working right know
all you have to do y search something, anything... and you'll see... i really need your help guys I hope your answers :(
