21
FEV

Typeahead.js - De l'autocomplétion d'input Javascript made in Twitter

Publié le 21/02/13 à 09h15 par DJo

Typeahead.js est une bibliothèque javascript permettant de mettre en place de l'auto-complétion performante dans vos formulaires HTML.

Typeahead.js est une bibliothèque javascript permettant de mettre en place de l'auto-complétion performante dans vos formulaires HTML.

Développée et rendue open source par Twitter il y'a quelques jours, typeahead.js va vous rendre énormément service si vous souhaitez proposer à vos visiteurs des champs avec auto complétion.

Que ce soit pour guider les utilisateurs à trouver un résultat plus facilement, ou les inciter à choisir un mot clé déjà existant, l'auto-complétion de champs est devenu incontournable aujourd'hui.

Evidemment, comme la ressource a été développée par Twitter, vous vous doutez bien qu'elle est à la fois performante et complète:

  • Affichage des suggestions au fur et à mesure que l'utilisateur tape
  • Affiche la meilleure suggestion directement en background dans l'input (Un coup de tab permet de valider)
  • Fonctionne à la fois avec des données en dur ou distantes (ajax)
  • Optimise les requêtes réseau pour de meilleures performances de chargement
  • Utilisation de sources de données multiples possibles
  • Possibilité de personnaliser le style des résultats (templates)
  • Fonctionne bien avec les langages RTL et éditeurs de texte

Typeahead.js - L'autocomplétion développée par Twitter

Voici un exemple d'utilisation avec plusieurs sources de données:

$('input.twitter-search').typeahead([
  {
    name: 'accounts',
    prefetch: 'https://twitter.com/network.json',
    remote: 'https://twitter.com/accounts?q=%QUERY'
  },
  {
    name: 'trends',
    prefetch: 'https://twitter.com/trends.json'
  }
]);

Vous pouvez combiner un moteur de template Javascript comme Mustache pour personnaliser le style du rendu:

<ol class="tt-dropdown-menu">
  {{#dataset}}
    <li class="tt-dataset-{{name}}">
      <ol class="tt-suggestions">
        {{#suggestions}}
          <li class="tt-suggestion">{{{html}}}<li>
        {{/suggestions}}
      </ol>
  {{/dataset}}
</ol>

La doc est complète sur le Github de la ressource, vous n'aurez pas de mal à comprendre comment tirer partie au maximum du système d'autocomplétion.

Qu'en pensez-vous?

 

Site Officiel

Baraguiné par luger95 le 27/02/13 à 22h23
luger95 sur La Ferme du Web
Je n'arrive pas à le faire fonctionner :s

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web