Autocomplétion avec JQuery UI
Cet exemple montre comment mettre en place un champ texte autocomplété dans un formulaire grâce à JQuery UI 1.11.4.
Même si JQuery offre de très nombreuses méthodes pour gérer le DOM, les propriétés CSS, AJAX et la gestion des événements, JQuery UI le complète parfaitement en offrant des méthodes additionnelles appliquées à la réalisation de l'interface utilisateur (« UI », dans « JQuery UI », signifie « user interface », soit « interface utilisateur » en français). JQuery UI est en quelque sorte un vaste assemblage de plugins accessibles à travers un seul fichier JavaScript et permettant ce construire des interface utilisateur de qualité professionnelle sur les pages web.
Sur le site Gecif.net JQuery UI 1.11.4 a été installé le 07 juillet 2015 , en plus de JQuery 1.7.2 (installé en juillet 2012).
Les chemins d'accès sur Gecif.net sont (sans numéro de version dans le chemin afin de mettre à jour facilement JQuery et JQuery UI) :
Pour JQuery 1.7.2 :
<script type="text/javascript" src="http://www.gecif.net/scripts/jquery.js"></script>
Pour JQuery UI 1.11.4 :
<script type="text/javascript" src="http://www.gecif.net/scripts/jquery-ui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="http://www.gecif.net/scripts/jquery-ui/jquery-ui.js"></script>
Démonstration de JQuery UI 1.11.4
Démonstration de l'application :
Le champ texte du formulaire ci-dessous est autocomplété avec une liste de langages de programmation.
Code source JQuery utilisé pour l'autocomplétion :
<script type="text/javascript" language="javascript">
/////////////////////////////////////////////////////////
// Autocomplétion en JQuery UI 1.11.4
// Réalisé le 07 juillet 2015 par Jean-Christophe MICHEL
// www.gecif.net
$(document).ready(function(){
var liste = [
"ActionScript",
"AppleScript",
"Asp",
"ADA",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"CAML",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Lingo",
"Perl",
"PHP",
"Python",
"Ruby",
"Pascal",
"Prolog",
"TCL",
"Scala",
"Scheme"];
$('#recherche').autocomplete({
source : liste
});
});
</script>
Code HTML du formulaire :
<form>
<input type="text" id="recherche" />
</form>
Encore une fois tout ceci est extrêmement simple, et JQuery tient sa promesse : écrire moins pour faire plus !
Réalisé par Jean-Christophe MICHEL
Juillet 2015