¿如何在異步搜索過程中添加「加載更多」按鈕？

我有這個小問題...當我在我的網站上搜索任何東西時，結果顯示異步同時輸入...單獨如果我要求的詞有我不知道的... 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

¿如何在異步搜索過程中添加「加載更多」按鈕？

回答

相關問題