Foros del Web » Programando para Internet » Jquery »

¿Limitar resultados de buscador asincrono?

Estas en el tema de ¿Limitar resultados de buscador asincrono? en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/09/2016, 17:06
 
Fecha de Ingreso: diciembre-2015
Mensajes: 115
Antigüedad: 8 años, 3 meses
Puntos: 2
Pregunta ¿Limitar resultados de buscador asincrono?

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
  1. <input type="text" id="busqueda"  name="busqueda" value="" required autocomplete="off" onKeyUp="search();">
  2. <div id="result"></div>
  3. <button id="loadmore" hidden="hidden" name="loadmore"> load more</button>
  4.  
  5. <script type="text/javascript">
  6.     var track_page = 1; //track user click as page number, righ now page number 1

PHP:
Código PHP:
Ver original
  1. <?php
  2. //Archivo de conexión a la base de datos
  3. require('db_conexion.php');
  4.  
  5. $consultaBusqueda = $_POST['valorBusqueda'];
  6.  
  7. if (isset($consultaBusqueda)) {
  8. //sanitize post value
  9. $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
  10. //throw HTTP error if page number is not valid
  11. if(!is_numeric($page_number)){
  12.   header('HTTP/1.1 500 Invalid page number!');
  13.   exit();
  14. }
  15. //capacity
  16. $item_per_page = 5;
  17.  
  18. //get current starting point of records
  19. $position = (($page_number-1) * $item_per_page);
  20.  
  21. //query
  22. $buscar= $conexion->query("SELECT info from table ORDER BY id DESC LIMIT $position,$item_per_page");
  23.  
  24. //conditionals
  25.     if (!$query_execute->num_rows) {
  26.         $mensaje = "no results";
  27.     }else{
  28.         $filas= $query_execute->num_rows;
  29.         echo $filas.' Results for <mark>'.$consultaBusqueda.'</mark>';
  30.  
  31. //show results
  32. while($row = $buscar->fetch_array()) {
  33.             $variables="something";      
  34.             echo $variables;
  35.         }
  36.     }
  37. }else{
  38. echo "Error";
  39. }    
  40. ?>

JQUERY-JS:
Código Javascript:
Ver original
  1. function stopRKey(evt) {
  2. var evt = (evt) ? evt : ((event) ? event : null);
  3. var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  4. if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
  5. }
  6. document.onkeypress = stopRKey;
  7.  
  8.  
  9. $(document).ready(function() {
  10.     $("#result").html('<p> </p>');
  11.     var track_page = 1; //track user click as page number, righ now page number 1
  12. });
  13.  
  14. function search() {
  15.      var textoBusqueda = $("input#busqueda").val();
  16.  
  17.      if (textoBusqueda != "") {
  18.         $("#result").show();
  19.         $(".close").show();
  20.         $("#loadmore").show();
  21.         $.post("actions/buscar.php", {valorBusqueda: textoBusqueda, 'page': track_page}, function(mensaje) {
  22.               if(mensaje.trim().length == 0){
  23.        $("#loadmore").hide();
  24.       //display text and disable load button if nothing to load
  25.       $("#loadmore").text("No hay mas resultados que mostrar").prop("disabled", true);
  26.     }
  27.       //load the result
  28.       $("#result").html(mensaje);
  29.         //scroll page to button element
  30.       $("html, body").animate({scrollTop: $("#loadmore").offset().bottom}, 100);
  31.  
  32.          });
  33.      } else {
  34.         $("#loadmore").hide();
  35.         $(".close").hide();
  36.         $("#result").html('<p> </p>');
  37.         };
  38.  
  39.      //load more results
  40.      $("#loadmore").click(function (e) { //user clicks on button
  41.      track_page++; //page number increment everytime user clicks load button
  42.      search(track_page);
  43. });
  44. };

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

Última edición por kukiko11; 03/10/2016 a las 22:01

Etiquetas: asincrono, html, javascript, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:04.