Premier billet Ajax du blog qui a pour but de vous expliquer comment faire de l’autocompletion simplement avec scriptaculous.
Petit rappel de ce qu’est l’autocompletion :
Il s’agit d’une liste de suggestions de mots proposés dynamiquement à l’utilisateur lors de sa saisie dans un champ texte.
Le meilleur exemple en ligne reste Google Suggest .
Pour cet exemple nous allons utiliser la bibliothèque d’effet javascript Scriptaculous et principalement le composant Ajax.Autocompleter.
On commence par créer un formulaire html simple :
A la fin du HTML on rajoute le code javascript suivant qui instancie la classe Autocompleter de scriptaculous :
new Ajax.Autocompleter(
"auteur", //champ sur lequel l'autocomplétion sera effectuée
"prompt_auteur", //conteneur des suggestions
"get_auteurs.php", //accès aux données côté serveur
{
paramName: 'auteur', //nom de la variable passée au script serveur
minChars: 1 //nombre de caractère au bout duquel l'autocomplétion est lancée (ici dès la première lettre saisie)
}
);
Enfin coté serveur un petit script PHP contenant les données pour l’autocomplétion :
//get_auteurs.php
$auteurs = array("anto","Antoine","Babylone","Gil","jblanche","ju","ken","kikko","nerik","Nico","PingooO","sd","Wahiba");
echo "
- ";
foreach ($auteurs as $auteur){
if (strpos($auteur, $_POST['auteur']) === 0){
echo "
- $auteur "; } } echo "
Il ne reste plus qu’à styler le tout en css.
div.autocomplete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
div.autocomplete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:32px;
cursor:pointer;
}
et le tour est joué :
Merci pour la source !
Super ça marche trop bien !
J’ai reussi à faire passer l’id de mon élément au lieu du nom en ajoutant la ligne :
afterUpdateElement : getSelectionId
à la liste des paramètres de Ajax.Autocompleter… (entre les {} )
Ensuite j’ai la fonction js:
function getSelectionId(text, li) {
var url = “auteur_detail.php?id=”+li.id;
window.location.replace(url);
}
Dans mon get_auteurs.php je met l’id de l’auteur dans chaque :
echo “”.$auteur['name'].”\n”;
Par contre, je ne sais pas comment mettre un texte du genre “commencer à ecrire ici” dans le champ de recherche qui s’efface dès que l’utilisateur va cliquer pour écrire, une idée ?
Les balises html ne sont pas passées a la fin de mon premier msg, il fallait lire :
Dans mon get_auteurs.php je met l’id de l’auteur dans chaque ligne ‘li’ :
echo “li id=\”".$club['id'].”\” “.$club['name'].$age.”.” /li \n”;
(J’ai enlevé les crochets aux balises li sinon ça ne passe pas…
Pour ton affichage dans le input qui s’efface au focus :
Tu mets ton texte “commencer à écrire ici” dans le html et sur le onfocus de ton champ input tu faise : this.value=”".
ce tuto, c’est la chance de ma vie !
J’y crois à mort !