Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Typeahead.js una nueva forma de buscar

Typeahead.js una nueva forma de buscar 06.AUG.13

Gianfranco Lemmo
Fundador WebBizarro

Typeahead.js es un plugin de javascript realizado por nuestros amigos de Twitter como el famoso Bootstrap que como podemos veracaban de sacar su versión 3 que ya estaremos hablando de ello en los próximos días.

Este plugin tiene la característica fundamental decambiarle el aspecto sórdido que poseen las cajas de texto de autocompletado, no tengo nada en contra de ellas pero vamos a estar claros, su visual deja mucho que desear.

Aquí les presento atypeahead.js un plugin que para realizar una búsqueda es simplemente genial tan sólo con colocar una palabra una letra el te despliega una lista con las posibles opciones a buscar, también se puede utilizar para el gran tedioso combobox ya conocido de países, ya todos sabemos cual es nuestro país para que vamos a colocar un listado gingantesto con todos los países, sino que tan solo el usuario coloqué una letra o una parte de la palabra de su país en la parte inferior y ledesplegamos los países asociados con las letras que introdujo, creando una mejor experiencia de usuario.

Para su correcto funcionamiento necesitamos lo siguiente:

    1. Descargamos el plugin de la siguiente dirección.    
    2. El proyecto también lo podemos descargar de su cuenta de Github.     
    3. Importamos jquery de cualquier sitio de su preferencia

Tenemos algunos ejemplo de este plugin:

Países

 

$('.example-countries .typeahead').typeahead({                                
    name: 'countries',                                                          
    prefetch: '../data/countries.json',                                         
    limit: 10                                                                   
});

 

Nba y Nhl Teams

 

$('.example-sports .typeahead').typeahead([
    {
        name: 'nba-teams',
        prefetch: '../data/nba.json',
        header: '<h3 class="league-name">NBA Teams</h3>'
    },
    {
        name: 'nhl-teams',
        prefetch: '../data/nhl.json',
        header: '<h3 class="league-name">NHL Teams</h3>'
    }
]);

 

Estos son algunos de los ejemplos recolectados, puedes encontrar más en la página oficial typehead.js