(Article rédigé par un groupe d’étudiants d’IUT dans le cadre d’un projet tutoré)
Tout d’abord nous allons expliquer ce qu’est une autocompletion :
Une autocompletion et une action qui s’effectue sur un champ de texte.
Par exemple : Imaginez une secrétaire qui recherche le nom d’un employé, elle doit taper son nom dans un champs. Donc une solution pour rendre plus rapide et plus agréable la saisie a été de proposer une liste de nom au fur et a mesure que le nom est tapé.
Cette solution offre un autre avantage, si un utilisateur ne connaît que le début du mot, il pourra aisément retrouver la suite.
L’autocompletion propose donc une liste selon différent critère de sélection définie a l’avance tel que les mots les plus populaire, ou simplement par ordre alphabétique (le plus communément utilisé).
Avant de commencer, il est conseillé aux personnes qui connaissent peu l’Ajax de consulter l’article sur l’implémentation.
Dans un premier temps nous allons aborder une méthode qui propose une liste de mots en dehors du champ de saisie.
Ici, le critère de sélection de la liste est l’ordre alphabétique.
La liste des mots proposés est contenue dans un tableau, mais on peut très bien imaginer de se servir dans une base de données.
Le fichier JavaScript est le même que celui pour l’implémentation, le fichier html dérive lui aussi de l’exemple précédent.
Voici le formulaire html :
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”FR” lang=”FR”>
<head>
<script type=”text/javascript” src=”/ajax/autocomplete.js”></script>
</head>
<body>
<form name=”saisie” method=”GET” action=”javascript:verifier()”>
<!–c’est ici que l’ajout de caractère appelle la fonction d’autocompletion, l’argument “onKeyUp” est l’évènement de relâcher une touche. –>
Mot : <input type=”text” onKeyUp=”javascript:verifier()” id=”mot” size=”20″ /><br />
<input type=”submit” value=”Envoyer” />
</form>
<p id=”resultat”></p>
</body>
</html>
Le fichier JavaScript :
/*
Fonction qui crée un objet XHR.
Cette fonction initialisera la valeur dans la variable globale “requête”
*/
var requete = null; /* On crée une variable qui contiendra l’objet XHR */
function creerRequete() {
try {
requete = new XMLHttpRequest(); /* On essaye de créer un objet XmlHTTPRequest */
} catch (microsoft) {
/* Si cela ne marche pas, on a peut-être affaire à un navigateur de Microsoft. On tente alors de créer un objet ActiveX */
try {
requete = new ActiveXObject(‘Msxml2.XMLHTTP’);
} catch(autremicrosoft) {
/* Autre méthode si la première n’a pas marché */
try {
requete = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch(echec) {
/* Si aucune méthode ne fonctionne, on laisse l’objet vide*/
requete = null;
}
}
}
if(requete == null) {
alert(‘Votre navigateur ne semble pas supporter les object XMLHttpRequest.’);
}
}
function verifier() {
/* On crée notre super objet XHR global */
creerRequete();
/* On construit à l’avance notre URL en passant les paramètre en GET. Le paramètre de notre formulaire est seulement le contenu du champ possédant l’identifiant ‘mot’. */
var url = ‘autocompletion.php?mot=’+document.getElementById(‘mot’).value;
/* On édite les propriété de l’objet : type de paramètre, url (avec paramètres) et une option autorisant une réponse du serveur */
requete.open(‘GET’, url, true);
/* On initialise la fonction de renvoi d’information : Après vérification que la requête est valide on met à jour le contenu HTML de la balise possédant l’identifiant ‘résultat’ avec la réponse du serveur */
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
document.getElementById(‘resultat’).innerHTML = requete.responseText;
}
}
};
/* C’est partit ! On envoi la requête XHR au serveur */
requete.send(null);
}
Maintenant, attaquons nous au fichier php :
NB: Tous les caractères sont au format UTF8 pour ne pas avoir de problèmes pour l’affichage des caractères spéciaux.
<?php
header(‘Content-Type: text/xml;charset=utf-8’);
echo(utf8_encode(“<?xml version=’1.0′ encoding=’UTF-8′ ?><options>”));
if (isset($_GET[‘mot’])) {
$debut = utf8_decode($_GET[‘mot’]);
} else {
$debut = “”;
}
/*La variable $debut contient les caractères qui ont été saisie dans le champs de texte*/
$debut = strtolower($debut);
/* la variable $liste contient tous les mots qui vont être proposé pour la saisie
Ici la liste a été coupé pour éviter de polluer ce tutorial*/
$liste = array(“abeille”,”abricot”,”acheter”,”acheteur”,”adjectif”,”adroit”,”adroitement”);
/*La fonction qui suit va sélectionner dans la variable $liste tous les mots qui commencent par les caractères contenues dans $debut*/
function expreg($debut,$liste) {
/*On définie le nombre de mot maximum a proposer*/
$MAX_RETURN = 10;
$i = 0;
foreach ($liste as $element) {
if ($i<$MAX_RETURN && substr($element, 0, strlen($debut))==$debut) {
echo(utf8_encode(“<option>”.$element.”<br/></option>”));
$i++;
}
}
}
/*on appelle la fonction*/
expreg($debut,$liste);
echo(“</options>”);
?>
Maintenant voyons un exemple qui ne va plus proposer une liste, mais va compléter le mot tapé par la plus probable proposition correspondante :
Il suffit de remplacer :
function verifier() {
/* On crée notre super objet XHR global */
creerRequete();
/* On construit à l’avance notre URL en passant les paramètre en GET. Le paramètre de notre formulaire est seulement le contenu du champ possédant l’identifiant ‘mot’. */
var url = ‘autocompletion.php?mot=’+document.getElementById(‘mot’).value;
/* On édite les propriété de l’objet : type de paramètre, url (avec paramètres) et une option autorisant une réponse du serveur */
requete.open(‘GET’, url, true);
/* On initialise la fonction de renvoi d’information : Après vérification que la requête est valide on met à jour le contenu HTML de la balise possédant l’identifiant ‘résultat’ avec la réponse du serveur */
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
document.getElementById(‘resultat’).innerHTML = requete.responseText;
}
}
};
/* C’est partit ! On envoi la requête XHR au serveur */
requete.send(null);
}
Par :
var nouveaumot;
var ancienmot;
var tailleNvMot;
var tailleAncMot=0;
function verifier() {
nouveaumot=document.getElementById(‘mot’).value;
tailleNvMot=document.getElementById(‘mot’).value.length;
if((ancienmot!=nouveaumot) && (tailleNvMot>tailleAncMot))//on test pour savoir les changements du champs
{
ancienmot=nouveaumot;
tailleAncMot=tailleNvMot;
/* On crée notre super objet XHR global */
creerRequete();
/* On construit à l’avance notre URL en passant les parmètre en GET. Le paramètre de notre formulaire est seulement le contenu du champ possédant l’identifiant ‘pass’. */
var url = ‘autocompletion.php?mot=’+document.getElementById(‘mot’).value;
/* On édite les propriété de l’objet : type de paramètre, url (avec paramètres) et une option autorisant une réponse du serveur */
requete.open(‘GET’, url, true);
/* On initialise la fonction de renvoi d’information : Après vérification que la requête est valide on met à jour le contenu HTML de la balise possédant l’identifiant ‘resultat’ avec la réponse du serveur */
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
var proposition=requete.responseText;
if (proposition!=”” && nouveaumot!=” “){
//Le code qui suit va servir pour mettre a la suite des lettres tapé par l’utilisateur, la fin du mot proposé
var taillemot=document.getElementById(‘mot’).value.length;
document.getElementById(‘mot’).value = proposition;
//Le code qui suit va servir pour sélectionner la partie du mot qui nous intéresse (afin que si le mot ne soit pas le bon, la saisie remplace la proposition au fur et a mesure sans gêner la saisie)
var taillemot2=(document.getElementById(‘mot’).value.length);
selectPart(document.getElementById(‘mot’),taillemot,taillemot2);
}
}
}
};
/* C’est partit ! On envoi la requête XHR au serveur */
requete.send(null);
}
else{
tailleAncMot=document.getElementById(‘mot’).value.length;
}
}
function selectPart(o,taillemot,taillemot2)
{
// Moz Support
if (o.selectionStart && o.selectionEnd)
{
o.selectionStart = taillemot; // début de la sélection
o.selectionEnd = taillemot2; // fin de la sélection a partir du début
return;
}
// IE Support
var oRange = o.createTextRange();
oRange.moveStart(“character”,taillemot); // début de la sélection
oRange.moveEnd(“character”,0); // fin de la sélection partir de la fin
oRange.select();
}
Maintenant l’autocomplétion se fera directement dans le champ texte !
Une autre solution serait de placer les mots dans une base de donnée, et utiliser un script PHP pour aller fouiller dans celle-ci.
