Morton 22 de julio de 2012 a las 13.20
   Imprimir artículo
elWebmaster.com

Almacenar búsquedas anteriores en tu sitio web con JavaScript


javascriptwide2No hay dudas de que el poder de Javascript nos permite hacer cosas diversas. En esta ocasión, utilizando LocalStorage en una página de búsqueda basada en Ajax, podremos recordar las búsquedas anteriores que el visitante realizó.

Haz clic aquí para ver una demostración >>

Esta aplicación hace uso de Bootstrap, jQuery, y Handlebars, pero comencemos por el Javascript y el template:

  1. <script>
  2.     $(document).ready(function() {
  3.  
  4.       var source = $("#artResultsTemplate").html();
  5.       var template = Handlebars.compile(source);
  6.  
  7.       $("#searchButton").on("click", function(e) {
  8.         e.preventDefault();
  9.         var search = $.trim($("#search").val());
  10.         if(search === '') return;
  11.         console.log("search for "+search);
  12.         $.get("service.cfc?method=searchArt", {term:search}, function(res,code) {
  13.  
  14.           var html = template({results:res});
  15.           $("#results").html(html);
  16.         },"JSON");
  17.  
  18.       });
  19.     });
  20.     </script>
  21.  
  22.   <script id="artResultsTemplate" type="text/x-handlebars-template">
  23.     <h1>Results</h1>
  24.     {{#if results}}
  25.       <ul class="thumbnails">
  26.       {{#each results}}
  27.         <li class="span3">
  28.           <div class="thumbnail">
  29.             <img src="{{image}}" width="260" height="180" title="{{name}}">
  30.             <div class="caption">
  31.               <h5>{{name}}</h5>
  32.               <p>{{description}}</p>
  33.               <p>Created by {{artist}} and selling for ${{price}}</p>
  34.             </div>
  35.           </div>
  36.         </li>
  37.       {{/each}}
  38.       </ul>
  39.     {{else}}
  40.       <p>
  41.       Sorry, no results.
  42.       </p>
  43.     {{/if}}
  44.   </script>

Como puedes ver, comenzamos compilando el template de Handlebars, y luego manejamos el clic en el botón de búsqueda. Lo que hacemos es tomar la cadena de la búsqueda, pasarla al servicio de ColdFusion para que consulte la base de datos, y luego pase los resultados a la plantilla de Handlebars.

Ahora añadiremos LocalStorage para recordar tus últimas cinco búsquedas. Para almacenar estos valores, usa un array. No puede almacenar variables complejas en LocalStorage, pero puedes serializarlas utilizando JSON:

  1. var pastSearches = [];
  2.  
  3. if(localStorage["pastSearches"]) {
  4.      pastSearches = JSON.parse(localStorage["pastSearches"]);
  5. }

Ahora haremos una comprobación para ver si el valor existe en el array, y si no, ponlo en el frente y añade uno cerca del final si el array es demasiado grande.

  1. if(pastSearches.indexOf(search) == -1) {
  2.      pastSearches.unshift(search);
  3.      if(pastSearches.length > 5) {
  4.         pastSearches.pop();
  5.      }
  6.      localStorage["pastSearches"] = JSON.stringify(pastSearches);
  7. }

Lo único que queda es simplemente escribir las búsquedas pasadas y escuchar los eventos de clic que reciban.

  1. function drawPastSearches() {
  2.     if(pastSearches.length) {
  3.         var html = pastSearchesTemplate({search:pastSearches});
  4.         $("#pastSearches").html(html);
  5.     }
  6. }
  7.  
  8. $(document).on("click", ".pastSearchLink", function(e) {
  9.     e.preventDefault();
  10.     var search = $(this).text();
  11.     doSearch(search);
  12. });

Y eso es todo. ¡Esperamos que les sea de utilidad!

Haz clic aquí para ver una demostración >>

Fuente original del artículo: DZone
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder