< >

Tutos

Autocomplétion & Ajax

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 :

<form method="get">
Trouvez un auteur du blog :
<input id="auteur" name="auteur" type="text" />
<div id="prompt_auteur" class="autocomplete"></div>
</form>

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 "
<ul>";
foreach ($auteurs as $auteur){
     if (strpos($auteur, $_POST['auteur']) === 0){
          echo "
	<li>$auteur</li>
";
     }
}
echo "</ul>
";
?&gt;

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é :
exemple autocompletion

Le 6 novembre 2007 par inwebitrust

Tags = ["", ""];

6 commentaires pour “Autocomplétion & Ajax”

  1. Antoine dit :
    14 novembre 2007 à 13:25

    Merci pour la source ! :)

  2. Gobi dit :
    11 décembre 2007 à 2:41

    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 ?

  3. Gobi dit :
    11 décembre 2007 à 2:44

    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…

  4. anto dit :
    11 décembre 2007 à 10:59

    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=”".

  5. Simon dit :
    12 décembre 2007 à 17:22

    ce tuto, c’est la chance de ma vie !

  6. Cyro dit :
    19 février 2008 à 11:22

    J’y crois à mort !

Laisser un commentaire

top < >