Ajax.Autocompleter()

L'objet Ajax.Autocompleter() permet de peupler un élément DOM précisé d'une liste de résultats (ndr : élément 'ul' encapsulant 'li') à partir d'une url serveur précisée le tout en tenant en compte d'une saisie texte dans un élément DOM 'input:text' précisé.

Cette page présente des exemples d'utilisation de cet objet et en rappelle directement ci après la syntaxe d'utilisation.

La liste déroulante ci après vous permet d'accéder aux différents exemples :
Exemple simple d'utilisation de Ajax.Autocompleter

Exemple simple d'utilisation de Ajax.Autocompleter

Cet exemple vous montre comment utiliser simplement Ajax.Autocompleter à partir d'un serveur ou est exécuté du php.
Ce premier exemple présente donc un groupe d'éléments DOM qui vont interragir avec un script PHP qui selon le (seul) caractère autorisé à la saisie renverra toutes les valeurs d'un tableau commençant par cette saisie.
Si aucun résultat n'est trouvé, un message en conséquence est renvoyé.
L'exemple est testable ci après :

Le code source de l'exemple est repris ci après avec dans l'ordre :

• le code HTML des éléments DOM de saisie, image, et zone retour.
• le code Javascript nécessaire pour la mise en place de l'interrogation et du traitement du retour serveur.
• le code PHP présent sur le serveur qui renvoit les données demandées.

Code HTML des éléments DOM de l'interface :
<input type="text" id="caractere" name="caractere" maxlength="1" style="width : 30px;" /> <div id="autocomplete_choices" style="width :500px; "></div> <img id="indicateur" style="display:none;" src="http://www.webjax.eu/images/waiting_0.gif"/>

Code Javascript permettant l'interrogation et interprétation retour serveur.
<script type="text/javascript"> new Ajax.Autocompleter("caractere", "autocomplete_choices", "http://localhost/webjax/ajax/fr/page114.php?mode=1", { minChars: 1 , method : 'post' , indicator: 'indicateur' } ); </script>

Code PHP du fichier serveur renvoyant les données sous forme HTML.
<? // tableau de données de test $texemple = array("Antoine","Alexandre","Bénédicte","Bertrand","Cyril","Christian","Dalila","Davisdania", "Emilie","Eric","Fabien","Fabrice","Gilles","Henri","Henriette","Isabelle","Iseult","Karine","Lucie","Lucien", "Marie","Marie-Chantal","Nicole","Nicolas","Odile","Omar","Patrice","Patricia","Quentin","René","Raymond","Sophie", "Stéphane","Tartenpion","Ursule","Ursula","Valérie","Valentin","Wyllem","William","Xavier","Yvan","Yvonne","Zoé"); // recherche selon le caractère transmis $char = $_POST['caractere']; if ($char !== null) { $ret = trouverNom ($char,$texemple); if ($ret === false) { $strHtml .= htmlListeRetour(array("aucun résultat retourné")); } else { $strHtml .= htmlListeRetour($ret); } } else { $strHtml .= htmlListeRetour(array("aucun résultat retourné")); } /* * boolean false ou string * htmlListeRetour ( array data ) * */ function htmlListeRetour ($data) { $str = null; if (sizeof($data) > 0) { $str .= "<ul>"; for ($i=0;$<sizeof($data);$i++) { $str .= "<li>".$data[$i]."</li>"; } $str .= "</ul>n"; if ($str !== null) return $str; else return false; } else return false; } /* * boolean false ou array data_selected * trouverNom ( string(1) char , array tdata ) * */ function trouverNom ($char,$tdata) { $t = array(); $cpt = 0; for ($i=0;$i<sizeof($tdata);$i++) { if ($char == $tdata[$i][0]) { $t[$cpt] = $tdata[$i]; $cpt++; } } if (sizeof($t) > 0) return $t; else return false; } ?>

: 09/01/2007 22:23:53 | : Scriptaculous, Scriptaculous.js, Ajax, Ajax.Autocompleter, Autocompleter, Autocompleter.Base, Autocompleter.Local, autocompletion, recherche, intuitive, exemple,

Aucun commentaire enregistré