aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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.

<stile>
     .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;
     }
  </stile>

• 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.

Compártelo