¿如何在异步搜索过程中添加“加载更多”按钮？

我有这个小问题...当我在我的网站上搜索任何东西时，结果显示异步同时输入...单独如果我要求的词有我不知道的... 100结果，所有的结果将出现，并且页面的滚动会过长，所以我需要一些按钮，允许我加载结果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); 
}); 
};

，但我不能让它正常工作，但......因为确定;我搜索了一些东西，我得到了前10个结果，但是然后......当我点击'加载更多'按钮时，我得到了旧的十个结果被下一个结果取代，而不是20个结果，因为它应该是，所以......

希望你能帮助我的家伙：C

来源

2016-09-29 kukiko11

您始终将导致进入#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">')

来源

2016-09-29 17:29:42 Dimava

你好像是c失去..我做了更改，但它仍然无法正常工作，您可以在链接http://www.subeuna.com/blog/上查看它...搜索例如字母'a'，并尝试加载更多的结果，你会看到如何实际工作，它不好uu – kukiko11

¿如何在异步搜索过程中添加“加载更多”按钮？

回答

相关问题