autocomplete.js : Un autocomplete puissant et léger

autocomplete.js, voilà le mot du jour. Je souhaite vous présenter l’autocomplete que j’ai développé récemment et que vous pouvez désormais retrouver sur la page dédié au projet ainsi que sur la page GitHub.

Étant donné que je suis développeur Symfony, il m’arrive régulièrement de devoir chercher de nouvelles solutions aussi bien pour optimiser mon code PHP, mais également pour créer des interfaces plus « friendly » et le plus légère possible. C’est malheureusement ce dernier point qui pêche puisqu’on trouve des scripts de-ci et de là permettant de réaliser des actions toutes plus « kikou » les unes que les autres. Dernièrement, j’avais besoin d’un simple autocomplete de type remote (AJAX). Je pense que tout le monde connaît la librairie qu’est jQuery. Via cette bibliothèque, on peut trouver d’autres boîtes à outils comme jQuery-UI proposant une multitude de services dont un widget autocomplete. Vous pourrez entre autres trouver l’autocomplete que je viens de vous linker et sa fameuse documentation qui me laisse personnellement très dubitatif quant à la pertinence des fonctionnalités proposées. Et admettons que toutes les fonctionnalités soient utiles, faudrait-il encore toutes les maîtriser.

autocomplete.js

Je me suis alors mis en tête d’écrire une librairie qui ne servirai que pour un autocomplete, qui serait léger et surtout qui serait sans dépendance ! Cet autocomplete propose uniquement une solution pour les autocomplete de type « remote ». Les autocomplete sans AJAX pullulent sur le web, mais rare sont ceux proposent une version « full web ».

Il est léger ton autocomplete, vraiment léger ?

C’est assez simple à calculer entre nos deux produits. Je vous propose de comparer rapidement des poids des deux codes.

autocomplete.js

C’est très simple à calculer, autocomplete ne possède aucune dépendance, et au moment où j’écris ces lignes, la dernière version que j’ai publié comme stable (v 1.4.0) pèse un tout petit mois de 4Ko.

jQuery-UI autocomplete

Pour lui, c’est assez simple à calculer. Si on ne prend que les widgets nécessaire, UI pèse approximativement 34Ko, auquel nous devons ajouter la dépendance de jQuery. En fonction de la version que vous choisirez le poids va varier. Ici, je prends le poids de la version fournit avec UI, soit la version 1.11.1 pour un poids de 93Ko. Soit un poids total de 127Ko pour réaliser un simple autocomplete. Personnellement, j’imagine également l’impact sur les performances doit être tout aussi disproportionné…

autocomplete.js is Plug-and-Play

Ça ressemble presque à une publicité copié outrageusement, qui cacherait derrière ce terme un vendeur, une fonctionnalité magique. Et non, comme vous pourrez le voir sur la documentation de autocomplete.js, il suffit simplement de charger le script JavaScript, et de’éxecuter lorsque la librairie est chargée, le script. Toute la documentation est disponible sur la page de l’API autocomplete-js.com.

Une alternative

Bien que le script que j’ai développé ne soit pas éprouvé à outrance, il m’a déjà servi parfaitement sur des projets professionnelles. Il serait donc bien que des scripts alternatifs aux usines de type jQuery émerge, aussi bien pour les autocomplete que pour les autres widgets disponibles.

Aujourd’hui, Google ne propose aucune alternative, et il n’y a qu’à voir lors d’une recherche.

• Google ne présente que très peu d’équivalent à jQuery-UI autocomplete…
• … alors qu’il existe des alternatives solides à cet autocomplete !

Un autocomplete léger mais uniquement remote

Je vous met en garde maintenant car comme je l’ai dit plus haut, autocomplete.js, est au autocomplete de type « remote » ce qui signifie que vous ne pourrez pas fournir les informations de manière pre-loaded dans votre DOM. De très bonne librairie existe comme typehead.js ou AutoCompleteJS. Plutôt que d’embarquer de nombreuses fonctionnalités pour du remote ou du local, autant choisir un produit spécifique qui n’embarquera que les fonctionnalités nécessaires.

Inconvénient d’utiliser un remote autocomplete

Bien évidemment, il n’y a pas que des avantages, d’ailleurs je n’essaie pas de vous convaincre d’utiliser autocomplete.js mais juste de le défendre des solutions à tout faire.
Bien évidemment, l’utilisation d’autocomplete.js vous obligera à être toujours connecté au web et les temps de réponse peuvent en fonction du serveur que vous utiliserez être plus ou moins rapide.

Avantage d’utiliser un remote autocomplete

Maintenant les avantages !

1. Cela déchargera votre DOM d’informations et votre browser sera rapide dans une certaine mesure à générer votre page.
2. Cela décharge votre navigateur de tout traitement JavaScript et allège une nouvelle fois votre page.
3. Les recherches peuvent plus être complexes et elles seront plus facile à développer sur la partie web server.
4. L’autocomplete renverra les informations du serveur, vous pouvez donc sans soucis mettre à jour votre application PHP ou autre sans avoir à faire évoluer votre script JavaScript.
   Voilà, il est temps pour moi d’arrêter cet article et de raccrocher mon clavier dédier à cette autocomplete. Désormais, si vous avez besoin d’un autocomplete vous savez que vous pouvez compter sur autocomplete.js, et que vos collègues aussi peuvent l’utiliser autocomplete.js avec la certitude qu’il est efficace.

Et après avoir manger au petit dej’ de l’autocomplete, avoir manger de l’autocomplete à midi, avoir goutter de l’autocomplete et avoir diner de l’autocomplete, je vous souhaite de faire de bon autocomplete !