Autocomplete est une petite librairie Javascript qui va vous permettre de créer des champs select sous vos champs de saisie, afin d'améliorer l'ergonomie de votre site. Les données qui remplissent la liste peuvent venir d'ou vous voulez (tableau, AJAX, autre champ select, ...).
Puis créez normalement votre formulaire HTML avec le champ input texte, et donnez lui un ID.
Appellez enfin la fonction autocomplete_build()
Le premier argument est l'ID de votre champ input,
le second est une référence à la fonction qui va chercher les données,
le troisième est un argument qui sera passé a cette fonction. (voir plus loin pour les détails)
Vous pouvez manipuler l'objet select créé, car il est renvoyé par la fonction, pour changer sa classe par exemple.
A noter qu'il y a quelques paramétrages suplémentaires faisables au début du fichier autocomplete.js.
Vous pouvez ainsi changer le temps minimum entre deux appels de la fonction, modifier la longueur maximum de la liste, ou le nombre de caractères minimum qu'il faut rentrer dans le champ pour appeller la fonction.
Le retour de la fonction référée dois être formaté convenablement !
Vous pouvez voir la source du fichier php appelé Ici.
On utilise ici du XML, mais vous pouvez choisir nimporte quel format de retour.
Mais comment ?
Trés simple.
3) Fonction customisée : la source est un autre champ select
Essayons de créer notre propre fonction de récupération de données.
Nos données sont dans un champ select présent dans la page.
<script language="javascript" src="autocomplete.js"></script>
<br>Le select source <select id="my_select"><option value="1">first option</option><option value=2>second option</option></select>
<form>Le champ select autocomplete <input type="text" id="myfield"></form>
<script language="javascript">
function my_func(input)
{
var opts = input.args.options;
var list = new Array();
var i;
for (i=0;i<opts.length;i++) {
if(opts[i].innerHTML.substr(0, input.value.length).toLowerCase() == input.value.toLowerCase()) {
list[opts[i].value] = opts[i].innerHTML;
}
}
if (i) {
ac_fill_select(input, list);
}
}
myselect = autocomplete_build("myfield", my_func, document.getElementById("my_select"));
</script>
Fini ! Voila ce que ca donne :
Le select source
Voyons les explications ligne par ligne.
Premierement, lier la librairie et créer le champ select qui va contenir les données.
Si il n'y a que deux options, c'est pas parceque je suis flemmard, mais pour des raisons de lisibilité !
La, ça se complique un peu, souvenez vous que la fonction que vous allez écrire va être appellée par la lib, et non par vous. Vous ne pouvez donc pas choisir quels arguments lui passer. Mais ne vous inquiétez pas, il y a une solution !
Votre fonction recevra comme argument l'objet DOM INPUT que l'on viens de créer (celui avec l'ID "myfield").
<script language="javascript">
function my_func(input)
{
L'argument que vous vouliez passer a cette fonction, et que vous avez donné comme 3ème argument a autocomplete_build() se trouve en faite dans input.args !
input.args peut être de nimporte quel type, car seul votre fonction l'utilisera.
Dans cet example j'ai choisi de passer l'objet select qui dois être copié. la variable "opts" contiendra donc maintenant la liste d'options du champ select à copier.
var opts = input.args.options;
la variabale "list" va contenir les données.
var list = new Array();
var i;
Vous n'avez pas oublié que "opts" est une collection d'options ?
Je la parcours..
for (i=0;i<opts.length;i++) {
.. je choisi seulement les options qui correspondent a l'entrée dans mon champ de saisie ..
..et les ajoute à la liste.
Qui est en fait un tableau associatif,
dont la clé sera l'attribut "value" de l'option,
et la valeur, le texte de l'option.
Les clés et valeurs peuvent être des entier ou des chaines de caractères.
Je vérifie que la liste n'est pas vide,
Puis j'appel la fonction qui affiche la liste avec l'objet input et le tableau que l'on viens de construire comme arguments.
if (i) {
ac_fill_select(input, list);
}
Notre fonction customisée est finie, il n'y a plus qu'a appeler la fonction de création du contenu.
Attention, le troisième argument peut être déroutant,
j'ai passé un objet SELECT a la fonction autocomplete_build ..
Mais quand je regarde notre fonction personalisée, elle recois un objet INPUT !
C'est parce que le Select va devenir un membre de l'objet Input.
De cette manière, notre fonction pourra y avoir accès, et on pourra lui passer nimporte quel type d'argument.
