Contenido

Crea tu propio suggest

23 ene

+ 12

Desde que ví en Google, el suggest aluciné de lo útil que era eso, e incluso diseñé uno que está implementado en el ajaxRegulus.

Hoy navegando por del.icio.us, he descubierto esta librería JS para crear un suggest de una forma facil y rápida.

Actualización

Suggest, es una herramienta que facilita las busquedas, dando resultados obtenidos de una base de datos, o un fichero XML, o cualquier otra fuente, de tal forma que a medida que estás introduciendo la palabra él te está sugiriendo posibles palabras con respecto a las palabras introducidas. Al igual que muchas aplicaciones de escritorio lo hacen y no le prestamos atención, en web no era algo tan trivial como ahora.

ajax, suggest, php, javascript

¿Como usarla?

  • Descargar el js (suggest.js)
  • Hacemos la llamada al fichero
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="../suggest.js"></script>
  • Colocamos los estilos del div.
<style type="text/css">
     .suggest {
         position: absolute;
         background-color: #FFFFFF;
         border: 1px solid #CCCCFF;
         font-size: 80%;
         width: 200px;
     }
     .suggest div {
         display: block;
         width: 200px;
         overflow: hidden;
         white-space: nowrap;
     }
  </style>
  • Hacemos la llamada a la función que nos capture el evento load y nos prepare el suggest.

<script type="text/javascript" language="javascript">
 <!--
      Event.observe(window,
                   'load',
                   function(){
                     new IncSearch.Suggest("text", "suggest", list, {dispMax: 10});
                   },
                   false);
  //-->
  </script>
  • Insertamos el input y el div para el suggest correspondiente.


<input id="text" type="text" name="pattern" autocomplete="off" size="50"><br/>
    <div id="suggest" class="suggest" />

De esta forma tan simple, tenemos un suggest montado.

Explicación



new IncSearch.Suggest("text", "suggest", list, {dispMax: 10});

text  –> Es el tipo de input que va a tratar el suggest
suggest –> Es donde van a ir los datos resultantes.
list –> List es la lista de valores por el que filtrará el suggest.

Requerimientos

Para hacerlo funcionar necesitamos prototype.

Aclaraciones

Este ejemplo es únicamente una idea de como montarlo, el ejemplo no carga nada dinámicamente de BD, aunque con un poco de idea e imaginación todo se puede conseguir.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.