Typeahead.js, l’autocomplétion facile

Ah Twitter que serait le monde sans ce réseau social occupé par les jeun’s qui veulent fuir leurs parents (qui eux sont toujours sur Facebook)…

Mais tu pète un cable ? pourquoi tu nous parle de Twitter ?

Bah je sais pas, suivez moi ? plz plz plz 😀

Ah non ça y est je sais … En plus d’être un réseau social Twitter est plutôt très investie dans les projet OpenSource notamment avec Bootstrap que tous les dev web du monde doivent connaitre (au moins de nom, abusez pas les mecs !). Bref perso j’adore Bootstrap mais là on ne va pas parler de ce framework CSS (désolé … vraiment, pensez à demander votre lot de consolation à la sortie).

Aujourd’hui on parle de typeahead.js.

Mais qu’est ce que c’est ce machin ?

Ca mon petit c’est l’outil que tu va mettre dans ta boite à outil dans 5 minutes (tu sais, a coté de bootstrap, Jquery, Jquery UI … etc)

Il est disponible ici, je ne saurez trop vous conseiller de prendre typeahead.bundle.js qui contient typeahed et son « engine » d’auto completion.

Bref graçe à cet outil magique vous allez pouvoir faire des formulaire de recherche qui envoient du lourd… avec de l’auto completion (oui oui comme Google :p) et super facilement 😀

Il suffit de crée un un formulaire, d’importer typeahed (le fichier du dessus là) et de rajouter ce code javascript :

Facile hein ?

Et ton code là il fait quoi ?

Alors la ligne « prefetch » contient l’url vers le JSON qui contient les résultats « de base » c’est un fichier qui sera charger dans le cache du navigateur directement au chargement de la page (génial hein ?), Dans ce fichier vous pouvez y mettre les titres de vos « top » articles.

La ligne « remote » contient l’url de la ressource à charger en complément (quand des lettres sont entrée dans le formulaire), %QUERY sera remplacer par ce qui à été tapé donc vous pouvez le mettre en paramètre (genre (monjson.json?query=%QUERY)

Et vous l’aurez compris il faut que votre code coté serveur renvoi du JSON, je ne vais pas détailler cela car ça dépendent de ce que vous utilisez pour dev (du php, un framework… etc)

Il faudra juste faire attention il faut que votre tableau renvoyer en JSON ressemble a ça (code en php).

 

C’est bien ton truc là mais moi je suis une feignasse, j’utilise bootstrap

Même si c’est développé par Twitter c’est pas compatible par défaut avec BootStrap 3 (l’ancienne version été elle conçu pour Bootstrap 2). Des CSS pour le rendre compatible sont disponible ici (clique sur moi, clique sur moi), bien sure si vous avez modifié bootstrap il faudra le modifier aussi 😉

Bon dev à tous !

Vous avez aimé cet article ? Partagez-le :)

Facebook Google Plus Twitter Linkedin email

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *