如何在搜索时限制异步显示的结果？

Posted 2023-02-19

【中文标题】如何在搜索时限制异步显示的结果？

【英文标题】：How to limit asynchronously showed results while searching?

【发布时间】：2017-02-10 04:46:57

【问题描述】：

我正在写一个个人博客，最近因为这个小问题而停止了......这对我来说是一个挑战，所以......我希望你们能帮助我

我想做的是；对我在搜索时获得的结果进行某种限制，那是因为这些结果在输入时是异步加载的，所以......如果我搜索的结果超过 100 个（例如），滚动就会太长，所以我想做的是使某种“加载更多按钮”出现，如果用户愿意，可以加载更多结果。我该怎么做？

这是我到目前为止所做的代码......

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("");
        ;
;

这里有页面，您可以了解如何正确工作

http://www.subeuna.com/blog/

你所要做的就是搜索一些东西，任何东西......你会看到......我真的需要你的帮助，我希望你的答案:(

【参考方案1】：

您可能会考虑让您的后端 api 仅返回最大数量的结果，如果超过该数量，则提供一个属性以获取更多结果。如果存在该额外属性，则显示加载更多按钮，否则不显示。

API pagination best practices