Introduction▲
Ajax est un acronyme très à la mode de nos jours. Qui n'a pas rêvé de pouvoir rajouter le prestigieux label Ajax (Asyncronimous Javascript And Xml) à un de ses sites web? Le but de cet article est de reprendre pas à pas le mécanisme d'autocomplétion utilisant la technologie Ajax mise en place à de nombreux endroits. L'exemple le plus parlant, et peut-être le plus abouti est celui de Google Suggest qui vous propose au fur et à mesure que vous entrez le texte de votre recherche les complétions les plus populaires.
Pour ce genre de choses, il est bien entendu impensable de passer dès le chargement de la page web l'ensemble des informations aux navigateurs clients. Le volume que cela représenterait saturerait le serveur en un temps record ! C'est là qu'intervient notre fameuse fée magique Ajax, qui va aller chercher l'information sur le serveur et l'intégrer au client sans que celui-ci ait à subir un rechargement de complet de la page.
Pour cet exemple, nous utiliserons un script très basique pour le serveur de données (une simple page PHP), car ce qui nous intéresse le plus est bien évidemment la mise en place de tout le moteur JavaScript nécessaire pour faire fonctionner notre autocomplétion. De plus, la compatibilité de Google Suggest avec les navigateurs anciens est très poussée. Dans le but de rendre les scripts plus lisibles, nous nous contenterons d'une version qui fonctionne avec les navigateurs récents (IE 6, Firefox 1.5 et partiellement Opera 8.5).
Nous allons créer un script permettant de gérer une liste déroulante, dans le sens habituel du terme, qui présentera les fonctionnalités qu'un utilisateur est en droit d'attendre d'une telle liste : proposition de complétion du champ texte, surlignement de la suggestion active, navigation par les flèches haut/bas ou à la souris…
Dans un souci de clarté, nous mettrons en œuvre les fonctionnalités de notre script d'autocomplétion progressivement, en trois grandes étapes : la mise en place du dialogue client/serveur, la mise en place de la présentation et enfin la gestion des évènements.
I. Étape 1 - Faire communiquer le client et le serveur▲
Cette première étape est celle où nous allons mettre en œuvre le fameux objet xmlHttpRequest qui va nous permettre de faire communiquer notre navigateur web avec le serveur, sans que l'utilisateur ait besoin de recharger sa page.
C'est le cœur de toute page utilisant Ajax, et la nouveauté introduite par cette technologie. Mais pour autant, ce n'est absolument pas la partie la plus difficile de la chose…
L'objet xmlHttpRequest permet comme son nom l'indique d'effectuer une requête HTTP vers notre serveur (et uniquement celui-là pour des raisons de sécurité), et d'effectuer un traitement dans notre page au moment du retour de la requête. Dans notre cas, la requête nous donnera les 10 premières possibilités de complétion de notre champ texte.
I-A. Côté serveur▲
Tout d'abord, intéressons-nous à la page côté serveur qui va renvoyer les possibilités de complétion à notre utilisateur. Comme il ne s'agit pas vraiment du sujet de cet article, nous allons la réduire à son strict minimum de façon à ce qu'elle nous retourne, pour une entrée utilisateur donnée, un fichier XML contenant les complétions possibles.
Voici le fichier php que nous utiliserons :
<?php
header('Content-Type: text/xml;charset=utf-8');
echo(utf8_encode("<?xml version='1.0' encoding='UTF-8' ?><options>"));
if (isset($_GET['debut'])) {
$debut = utf8_decode($_GET['debut']);
} else {
$debut = "";
}
$debut = strtolower($debut);
$liste = array([...]);
function generateOptions($debut,$liste) {
$MAX_RETURN = 10;
$i = 0;
foreach ($liste as $element) {
if ($i<$MAX_RETURN && substr($element, 0, strlen($debut))==$debut) {
echo(utf8_encode("<option>".$element."</option>"));
$i++;
}
}
}
generateOptions($debut,$liste);
echo("</options>");
?>La liste de mots utilisée (dans la variable $liste, qui n'a pas été recopiée ici) est la liste des 1500 mots maîtrisés par les élèves de CE2.
Vous pouvez tester le retour de cette page php: Liste des mots commençant par« de ».
Le nombre maximum de possibilités retournées par cette page est 10. Dans une application réelle, on peut tout à fait envisager que les complétions les plus probables soient retournées en premier (comme pour Google Suggest). Ces traitements sont à la charge du serveur et à votre initiative.
Le seul point particulier de cette page php est de bien noter que, de façon générale, il convient d'envoyer la réponse XML en UTF-8 bien propre, pour éviter d'éventuels problèmes d'encodage par après (accents qui disparaissent, document XML non reconnu…).
I-B. Côté client▲
I-B-1. La page HTML▲
Côté client, nous allons commencer par mettre en place une page HTML, la plus simple possible. Elle sera complétée par deux balises script qui respectivement la lieront à notre script javascript et initialiseront ce script.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test d'autocompletion</title>
</head>
<body>
<form name="form-test" id="form-test"
action="javascript:alert('soumission de ' + document.getElementById('champ-texte').value)"
style="margin-left: 50px; margin-top:20px">
<input type="text" name="champ-texte" id="champ-texte" size="20" />
<input type="submit" id="bouton-submit">
</form>
</body>
</html>Le body de la page ne changera pas de tout l'article. Nous nous contenterons d'y connecter les scripts nécessaires. Ainsi, pour un utilisateur n'ayant pas activé Javascript (un peu près 10 % des internautes), le formulaire apparaîtra comme un formulaire normal, sans aide à la complétion.
I-B-2. L'objet xmlHttpRequest▲
Le premier script que nous allons mettre en place est celui permettant de créer un objet xmlHttpRequest (ou XHR pour les intimes). Cet objet va nous permettre d'effectuer des requêtes vers notre serveur, sans avoir à recharger entièrement la page. Pour plus d'informations sur l'objet et ces méthodes, consultez l'article de siddh sur le sujet.
Pour notre part, nous allons utiliser la méthode suivante permettant de créer un nouvel objet, compatible entre tous les navigateurs actuels supportant l'objet xmlHttpRequest :
// retourne un objet xmlHttpRequest.
// méthode compatible entre tous les navigateurs (IE/Firefox/Opera)
function getXMLHTTP(){
var xhr=null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
xhr = null;
}
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
}
return xhr;
}I-B-3. Mise en place des constantes▲
Pour fonctionner et se mettre en place, notre script va avoir besoin de trois constantes :
- _documentForm : le formulaire contenant notre champ texte ;
- _inputField : le champ texte lui-même ;
- _submitButton : le bouton submit de notre formulaire.
La fonction d'initialisation de notre script prendra donc comme argument une référence sur ces trois éléments.
var _documentForm=null; // le formulaire contenant notre champ texte
var _inputField=null; // le champ texte lui-même
var _submitButton=null; // le bouton submit de notre formulaire
function initAutoComplete(form,field,submit){
_documentForm=form;
_inputField=field;
_submitButton=submit;
_inputField.autocomplete="off";
}On désactive l'aide à la saisie des navigateurs en mettant l'attribut autocomplete de notre champ texte à false.
Cette fonction sera liée à l'évènement window.onload de notre page. Elle sera enrichie au fur et à mesure par des besoins supplémentaires d'initialisation que nous rencontrerons tout au long de cet article.
I-B-4. Vérifier les changements du champ texte▲
Pour mettre en place notre mécanisme d'autocomplétion, nous devons être capable de détecter les changements dans le champ texte. Cela ne peut pas se faire avec le listener onchange du champ texte, car celui-ci n'est déclenché qu'au moment où le champ perd son focus.
Détecter les changements à chaque touche appuyée peut se révéler dangereux, par exemple dans le cas des copier/coller ou autres qui peuvent soit passer inaperçus, soit saturer notre pauvre moteur Ajax de demandes.
Dans ce domaine encore, nous allons prendre exemple sur Google Suggest et mettre en place une méthode qui vérifiera périodiquement les changements survenus dans le champ texte, et exécutera une requête vers le serveur si nécessaire.
var _oldInputFieldValue=""; // valeur précédente du champ texte
var _currentInputFieldValue=""; // valeur actuelle du champ texte
var _resultCache=new Object(); // mécanisme de cache des requêtes
// tourne en permanence pour suggérer suite à un changement du champ texte
function mainLoop(){
_currentInputFieldValue = _inputField.value;
if(_oldInputFieldValue!=_currentInputFieldValue){
var valeur=escapeURI(_currentInputFieldValue);
var suggestions=_resultCache[_currentInputFieldValue];
if(suggestions){ // la réponse était encore dans le cache
metsEnPlace(valeur,suggestions)
}else{
callSuggestions(valeur) // appel distant
}
_inputField.focus()
}
_oldInputFieldValue=_currentInputFieldValue;
setTimeout("mainLoop()",200); // la fonction se redéclenchera dans 200 ms
return true
}Cette méthode sera appelée la première fois dans la fonction d'initialisation de notre script. Elle contrôle à chacun de ses passages l'état du champ texte et exécute une requête vers le serveur si nécessaire.
_resultCache est un objet qui nous permettra de constituer un cache des requêtes, pour éviter de les renvoyer systématiquement (très utile, par exemple en cas de backspace).
La fonction metsEnPlace mettra en place dans la page nos suggestions, et la fonction callSuggestions exécutera une requête, via l'objet xmlHttpRequest, vers le serveur de données.
La méthode ci-dessus parait un peu complexe pour le résultat obtenu, mais elle va subir des changements au fur et à mesure des étapes de cet article. En particulier _currentInputFieldValue ne sera plus initialisée à l'intérieur de la méthode, mais dans les autres méthodes de gestion des évènements.
escapeURI est une méthode toute simple, permettant d'échapper les caractères spéciaux du champ texte avant d'envoyer la requête au serveur. Cette méthode se base sur des méthodes JavaScript natives des navigateurs.
I-B-5. L'appel au serveur - méthode callSuggestions▲
Cette méthode va contacter notre serveur pour récupérer au plus 10 suggestions pour le texte entré dans notre champ texte.
var _xmlHttp = null; //l'objet xmlHttpRequest utilisé pour contacter le serveur
var _adresseRecherche = "options.php" //l'adresse à interroger pour trouver les suggestions
function callSuggestions(valeur){
if(_xmlHttp&&_xmlHttp.readyState!=0){
_xmlHttp.abort()
}
_xmlHttp=getXMLHTTP();
if(_xmlHttp){
//appel à l'url distante
_xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);
_xmlHttp.onreadystatechange=function() {
if(_xmlHttp.readyState==4&&_xmlHttp.responseXML) {
var liste = traiteXmlSuggestions(_xmlHttp.responseXML)
cacheResults(valeur,liste)
metsEnPlace(valeur,liste)
}
};
// envoi de la requête
_xmlHttp.send(null)
}
}Cette fonction utilise l'objet xmlHttpRequest en mode asynchrone (le premier A de Ajax), comme le montre le troisième paramètre de la méthode open() qui vaut true.
Lorsque la réponse du serveur reviendra, le listener lié à l'évènement readyStateChange sera déclenché. Concrètement, cela signifie que quand la requête sera terminée (readyState==4), la fonction traiteXmlSuggestions transformera notre document XML en une liste de suggestions (Array de string) et la méthode metsEnPlace sera déclenchée, avec comme argument le texte dans le champ utilisateur et les possibilités de complétion. La méthode cacheResults permet de garder les demandes précédentes faites au serveur.
// Mécanisme de caching des réponses
function cacheResults(debut,suggestions){
_resultCache[debut]=suggestions
}I-B-6. Transformation du document XML - méthode traiteXmlSuggestions▲
Cette méthode va gérer la transformation de la réponse du serveur au format XML en une liste de suggestions, sous forme de tableau de chaînes de caractères.
I-B-7. La mise en place des suggestions - méthode metsEnPlace▲
La dernière fonction que nous avons à mettre en œuvre dans cette phase est la fonction metsEnPlace, qui va mettre les suggestions en place. Ces suggestions sont mises en place dans une liste de suggestions (liste à puce UL pour le moment), créée au moment de l'initialisation de notre script d'autocomplétion.
var _completeListe=null; // la liste contenant les suggestions
// création d'une liste pour les suggestions
// méthode appelée à l'initialisation
function creeAutocompletionListe(){
_completeListe=document.createElement("UL");
_completeListe.id="completeListe";
document.body.appendChild(_completeListe);
}
function metsEnPlace(valeur, liste) {
while(_completeListe.childNodes.length>0) {
_completeListe.removeChild(_completeListe.childNodes[0]);
}
for (var i=0; i < liste.length; ++i) {
var nouveauElmt = document.createElement("LI")
nouveauElmt.innerHTML = liste[i]
_completeListe.appendChild(nouveauElmt)
}
}Dans un premier temps, la présentation sera inexistante, l'interactivité également. Ce sera l'objet des deux prochaines parties que d'améliorer la présentation de la chose et de mettre toute l'interactivité en place.
Nous en avons maintenant terminé avec la première étape de cet article. Notre page HTML est maintenant capable de dialoguer avec notre serveur (qui est ici résumé à une simple page PHP), et d'intégrer dans la page le retour de ce serveur.
Vous pouvez tester le résultat.
Cette étape représente le cœur d'une page utilisant Ajax. Mais ce n'est pas l'étape la plus compliquée. En effet, il nous reste maintenant à présenter un peu plus convivialement notre liste de suggestions et à lier les évènements survenant sur le champ texte à notre liste de suggestions, pour reconstruire un comportement de type liste déroulante. Ces deux étapes sont plus « ingrates » que la première étape : il n'est plus question d'Ajax dans ces deux étapes, simplement de JavaScript habituel, avec tous les problèmes de compatibilité entre navigateurs.
Ces deux étapes sont les objets des deux sections suivantes.
II. Étape 2 - Présentation▲
La seconde étape de cet article est la présentation. En effet, dans la partie précédente, les suggestions étaient intégrées dans la page sous forme de liste à puces. Si cela permet de prouver que l'insertion a bien lieu, ce n'est pas la présentation que nous cherchons à obtenir.
Pour des raisons pratiques, notre liste de suggestions se présentera sous la forme d'un div contenant un couple div/span pour chacune des suggestions.
II-A. Initialisation des règles de style▲
La première chose à faire est d'initialiser l'ensemble des styles que nous allons utiliser. Pour cela, nous commençons par créer la méthode insereCSS qui nous permet d'insérer des règles de style dans la feuille CSS, de façon indépendante du navigateur. Cela implique bien entendu qu'une feuille de style soit liée à notre document.
//insère une règle avec son nom
function insereCSS(nom,regle){
if (document.styleSheets) {
var I=document.styleSheets[0];
if(I.addRule){ // méthode IE
I.addRule(nom,regle)
}else if(I.insertRule){ // méthode DOM
I.insertRule(nom+" { "+regle+" }",I.cssRules.length)
}
}
}La fonction ci-dessus ne fonctionne pas dans Opera (elle n'a aucun effet). En effet, le tableau styleSheets n'existe pas dans Opera. La présentation de notre liste sera donc partielle, pour cette raison dans Opera.
Nous pouvons maintenant initialiser les règles de style dont nous nous servirons par la suite :
function initStyle(){
var AutoCompleteDivListeStyle="font-size: 13px; font-family: arial,sans-serif; word-wrap:break-word; ";
var AutoCompleteDivStyle="display: block; padding-left: 3; padding-right: 3; height: 16px; overflow: hidden; background-color: white;";
var AutoCompleteDivActStyle="background-color: #3366cc; color: white ! important; ";
insereCSS(".AutoCompleteDivListeStyle",AutoCompleteDivListeStyle);
insereCSS(".AutoCompleteDiv",AutoCompleteDivStyle);
insereCSS(".AutoCompleteDivAct",AutoCompleteDivActStyle);
}Le style AutoCompleteDivListeStyle est le style qui sera appliqué au div contenant l'ensemble des suggestions. AutoCompleteDiv est le style des div de suggestions par défaut et AutoCompleteDivAct est le style de la div de suggestions actuellement en surbrillance ().
La fonction setStylePourElement va nous permettre d'appliquer une classe de style à un élément :
function setStylePourElement(c,name){
c.className=name;
}Dans la 'vraie' version de Google Suggest, cette fonction est bien plus élaborée et permet en particulier d'appliquer un style à l'élément même sous Opera, bien que les nouvelles classes de style n'aient pas pu être intégrées par Opera. Par souci de clarté toute cette partie a été mise de côté.
II-B. Calcul dynamique du positionnement▲
Dans un second temps, nous allons mettre en place les méthodes permettant de gérer dynamique le placement de notre liste de suggestions. Comme il est naturel pour une liste de suggestions, celles-ci doivent apparaître directement en dessous du champ texte que l'utilisateur est en train de remplir.
La méthode suivante permet d'obtenir la position absolue dans la page d'un élément :
// calcule le décalage à gauche
function calculateOffsetLeft(r){
return calculateOffset(r,"offsetLeft")
}
// calcule le décalage vertical
function calculateOffsetTop(r){
return calculateOffset(r,"offsetTop")
}
function calculateOffset(r,attr){
var kb=0;
while(r){
kb+=r[attr];
r=r.offsetParent
}
return kb
}La méthode suivante permet de déterminer la largeur à donner à notre liste de suggestions, qui doit être la même que pour notre champ texte. L'ajustement est lié à la largeur du bord de notre champ texte.
// calcule la largeur du champ
function calculateWidth(){
return _inputField.offsetWidth-2*1
}Enfin, cette dernière fonction utilise l'ensemble des méthodes précédentes pour appliquer le positionnement correct à notre liste de suggestions (qui a déjà été renommée en _conpleteDiv) :
II-C. Initialisation de la div de suggestions▲
Nous allons maintenant remplacer la méthode creeAutocompletionListe que nous avions écrite dans la première partie, par la méthode creeAutocompletionDiv, qui prendre en compte tout ce que nous venons de mettre en place
var _completeDiv = null; // la div contenant la liste de suggestions
function creeAutocompletionDiv() {
initStyle();
_completeDiv=document.createElement("DIV");
_completeDiv.id="completeDiv";
var borderLeftRight=1;
var borderTopBottom=1;
_completeDiv.style.borderRight="black "+borderLeftRight+"px solid";
_completeDiv.style.borderLeft="black "+borderLeftRight+"px solid";
_completeDiv.style.borderTop="black "+borderTopBottom+"px solid";
_completeDiv.style.borderBottom="black "+borderTopBottom+"px solid";
_completeDiv.style.zIndex="1";
_completeDiv.style.paddingRight="0";
_completeDiv.style.paddingLeft="0";
_completeDiv.style.paddingTop="0";
_completeDiv.style.paddingBottom="0";
setCompleteDivSize();
_completeDiv.style.visibility="visible";
_completeDiv.style.position="absolute";
_completeDiv.style.backgroundColor="white";
document.body.appendChild(_completeDiv);
setStylePourElement(_completeDiv,"AutoCompleteDivListeStyle");
}Notre div est maintenant créée. Elle est prête à recevoir des éléments qui prendront la forme de span contenu dans des div, eux-mêmes rajoutés à la div que nous venons de créer.
II-D. Mise en place de la liste de suggestions▲
La dernière étape dans la présentation est la mise en place des suggestions. La fonction metsEnPlace de la partie 1 est complètement réécrite pour construire des éléments div/span à la place des lis. Dans notre cas, l'élément span n'a pas une utilité énorme. C'est plus un artefact de lier au nombre de hits dans Google Suggest. Mais il permet de bien se rendre compte qu'on peut rajouter des éléments de présentation dans notre liste de suggestions indépendamment des valeurs de complétion.
function metsEnPlace(valeur, liste){
while(_completeDiv.childNodes.length>0) {
_completeDiv.removeChild(_completeDiv.childNodes[0]);
}
// mise en place des suggestions
for(var f=0; f<liste.length; ++f){
var nouveauDiv=document.createElement("DIV");
setStylePourElement(nouveauDiv,"AutoCompleteDiv");
var nouveauSpan=document.createElement("SPAN");
nouveauSpan.innerHTML=liste[f]; // le texte de la suggestion
nouveauDiv.appendChild(nouveauSpan);
_completeDiv.appendChild(nouveauDiv)
}
if(_completeDivRows>0) {
_completeDiv.height=16*_completeDivRows+4;
} else {
hideCompleteDiv();
}
}Vous pouvez maintenant retester notre page, dont la présentation a bien évolué.
III. Partie 3 - Gestion des évènements▲
La dernière partie de cet article s'attaque à la gestion des évènements. En effet, notre autocomplétion a maintenant l'aspect d'une liste déroulante, mais pas encore du tout le comportement. Il va nous falloir intercepter les divers évènements, intervenant un peu partout dans le document, pour qu'on puisse par exemple passer d'une suggestion à l'autre à l'aide des touches haut/bas, qu'on puisse sélectionner une suggestion à l'aide de la touche tabulation ou au clic de la souris ou pour qu'apparaisse dans le champ la possibilité de complétion.
Tous ces petits détails, qui vont faire que notre page sera réellement conviviale pour l'utilisateur, et qu'il saura l'utiliser de la façon la plus intuitive possible.
III-A. Gestion des touches▲
III-A-1. Sur le document▲
Le premier gestionnaire d'évènements que nous allons mettre en place est un gestionnaire d'évènement qui intercepte tous les évènements clavier ayant lieu sur le onkeydown de notre document. Cette méthode se contente de stocker dans la variable _lastKeyCode le code de la touche à l'origine de l'évènement.
var _lastKeyCode=null;
// Handler pour le keydown du document
var onKeyDownHandler=function(event){
// accès evenement compatible IE/Firefox
if(!event&&window.event) {
event=window.event;
}
// on enregistre la touche ayant déclenché l'évènement
if(event) {
_lastKeyCode=event.keyCode;
}
}Cette méthode est liée à l'évènement onkeydown du document, lors du chargement du document.
Elle nous servira lorsqu'un évènement fera suite à l'appui d'une touche clavier, pour pouvoir retrouver le code de la touche pressée.
document.onkeydown=keyDownHandler;III-A-2. Sur le champ texte▲
Nous allons maintenant mettre en place un gestionnaire d'évènements sur le onkeyup de notre champ texte. De cette façon, nous pourrons accéder à tous les évènements clavier intervenant sur notre champ texte et en changer éventuellement les effets.
var _eventKeycode = null;
// Handler pour le keyup du champ texte
var onKeyUpHandler=function(event){
// accès evenement compatible IE/Firefox
if(!event&&window.event) {
event=window.event;
}
_eventKeycode=event.keyCode;
// Dans les cas touches touche haute(38) ou touche basse (40)
if(_eventKeycode==40||_eventKeycode==38) {
// on autorise le blur du champ (traitement dans onblur)
blurThenGetFocus();
}
// taille de la selection
var N=rangeSize(_inputField);
// taille du texte avant la sélection (sélection = suggestion d'autocomplétion)
var v=beforeRangeSize(_inputField);
// contenu du champ texte
var V=_inputField.value;
if(_eventKeycode!=0){
if(N>0&&v!=-1) {
// on recupere uniquement le champ texte tapé par l'utilisateur
V=V.substring(0,v);
}
// 13 = touche entrée
if(_eventKeycode==13||_eventKeycode==3){
var d=_inputField;
// on mets en place l'ensemble du champ texte en repoussant la sélection
if(_inputField.createTextRange){
var t=_inputField.createTextRange();
t.moveStart("character",_inputField.value.length);
_inputField.select()
} else if (d.setSelectionRange){
_inputField.setSelectionRange(_inputField.value.length,_inputField.value.length)
}
} else {
// si on a pas pu agrandir le champ non sélectionné, on le mets en place violemment.
if(_inputField.value!=V) {
_inputField.value=V
}
}
}
// si la touche n'est ni haut, ni bas, on stocke la valeur utilisateur du champ
if(_eventKeycode!=40&&_eventKeycode!=38) {
_currentInputFieldValue=V;
}
if(handleCursorUpDownEnter(_eventKeycode)&&_eventKeycode!=0) {
// si on a pressé une touche autre que haut/bas/enter
PressAction();
}
}Ce gestionnaire est rattaché à l'évènement onkeyup à l'initialisation de la page :
_inputField.onkeyup=onKeyUpHandler;Ce gestionnaire d'évènements intercepte toutes les touches pressées sur notre champ texte. Il effectue des actions spécifiques pour les touches haut, bas et enter. Les touches haut et bas vont permettre de choisir la suggestion dans la liste et la touche enter permettra de valider le formulaire.
Pour les autres touches, il suit la partie de notre champ texte qui est entrée par l'utilisateur, en mettant à jour la variable _currentInputFieldValue et passe la gestion à la fonction PressAction.
L'étape de séparation de l'entrée utilisateur de la suggestion est très importante, car nous devons à tout moment connaître ce que l'utilisateur a rentré indépendamment de la valeur complète de notre champ texte, qui va être une des suggestions. Ce suivi remplace complètement la mise à jour de _currentInputFieldValue que nous avions mis en place.
Un certain nombre d'autres fonctions apparaissent dans cette méthode. Ce sont les méthodes :
- rangeSize : recherche la taille du texte sélectionné dans un champ ;
- beforeRangeSize : recherche la taille du texte placé avant la sélection dans un champ ;
- handleCursorUpDownEnter : gère les touches haut/bas et enter ;
- PressAction : gestionnaire de touches.
Les deux premières méthodes (rangeSize et beforeRangeSize) traitent de la taille de la sélection dans notre champ texte. La sélection est remplie automatiquement par notre suggestion, au moment de la mise en place des possibilités. Nous verrons l'ensemble de ces mécanismes dans les parties suivantes.
Pour l'instant, tout ce que nous devons savoir est que le champ texte se compose de deux parties : le champ entré par l'utilisateur suivi d'une partie sélectionnée qui est la suggestion la plus probable.
La fonction handleCursorUpDownEnter traite spécifiquement les touches haut/bas et enter. Les touches haut/bas permettent de changer le texte actuellement sélectionné dans notre menu déroulant, la touche enter valide le formulaire avec la suggestion que nous y avons placé.
// Change la suggestion sélectionnée.
// cette méthode traite les touches haut, bas et enter
function handleCursorUpDownEnter(eventCode){
if(eventCode==40){
highlightNewValue(_highlightedSuggestionIndex+1);
return false
}else if(eventCode==38){
highlightNewValue(_highlightedSuggestionIndex-1);
return false
}else if(eventCode==13||eventCode==3){
return false
}
return true
}Les touches haut/bas et enter sont capturées dans cette méthode. La méthode highlightNewValue sélectionne une suggestion repérée par son index. Cette méthode sera explicitée dans la prochaine partie.
La dernière méthode qui nous reste à définir dans le cadre de la gestion des touches clavier est la méthode PressAction. Cette méthode gère l'appui sur toutes les autres touches que haut/bas et enter. Cette méthode assure la sélection de la suggestion correcte dans la liste des suggestions quand un caractère utilisateur est ajouté. Elle est vue en détail dans la prochaine partie.
III-B. Gestion de la suggestion en surbrillance▲
Typiquement, dans une liste de suggestions, une des suggestions est en surbrillance. De plus, nous voulons également que dans notre champ texte apparaisse la première possibilité de complétion, en faisant en sorte que la partie générée par notre moteur soit sélectionnée pour être remplacée par une touche utilisateur si nécessaire.
III-B-1. choix d'une suggestion en surbrillance▲
La première méthode à mettre en place est la méthode PressAction, que nous étions en train de mettre en place dans la partie précédente. Cette méthode a pour charge de trouver la nouvelle suggestion correspondant à la chaîne entrée par l'utilisateur, de la mettre en surbrillance, et de compléter le champ texte par cette suggestion.
var _completeDivRows = 0;
var _completeDivDivList = null;
var _highlightedSuggestionIndex = -1;
var _highlightedSuggestionDiv = null;
// gère une touche pressée autre que haut/bas/enter
function PressAction(){
_highlightedSuggestionIndex=-1;
var suggestionList=_completeDiv.getElementsByTagName("div");
var suggestionLongueur=suggestionList.length;
// on stocke les valeurs précédentes
// nombre de possibilités de complétion
_completeDivRows=suggestionLongueur;
// possiblités de complétion
_completeDivDivList=suggestionList;
// si le champ est vide, on cache les propositions de complétion
if(_currentInputFieldValue==""||suggestionLongueur==0){
hideCompleteDiv()
}else{
showCompleteDiv()
}
var trouve=false;
// si on a du texte sur lequel travailler
if(_currentInputFieldValue.length>0){
var indice;
// T vaut true si on a dans la liste de suggestions un mot commençant comme l'entrée utilisateur
for(indice=0; indice<suggestionLongueur; indice++){
if(getSuggestion(suggestionList.item(indice)).toUpperCase().
indexOf(_currentInputFieldValue.toUpperCase())==0) {
trouve=true;
break
}
}
}
// on désélectionne toutes les suggestions
for(var i=0; i<suggestionLongueur; i++) {
setStylePourElement(suggestionList.item(i),"AutoCompleteDiv");
}
// si l'entrée utilisateur (n) est le début d'une suggestion (n-1) on sélectionne cette suggestion avant de continuer
if(trouve){
_highlightedSuggestionIndex=indice;
_highlightedSuggestionDiv=suggestionList.item(_highlightedSuggestionIndex);
}else{
_highlightedSuggestionIndex=-1;
_highlightedSuggestionDiv=null
}
var supprSelection=false;
switch(_eventKeycode){
// cursor left, cursor right, page up, page down, others??
case 8:
case 33:
case 34:
case 35:
case 35:
case 36:
case 37:
case 39:
case 45:
case 46:
// on supprime la suggestion du texte utilisateur
supprSelection=true;
break;
default:
break
}
// si on a une suggestion (n-1) sélectionnée
if(!supprSelection&&_highlightedSuggestionDiv){
setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDivAct");
var z;
if(trouve) {
z=getSuggestion(_highlightedSuggestionDiv).substr(0);
} else {
z=_currentInputFieldValue;
}
if(z!=_inputField.value){
if(_inputField.value!=_currentInputFieldValue) {
return;
}
// si on peut créer des range dans le document
if(_inputField.createTextRange||_inputField.setSelectionRange) {
_inputField.value=z;
}
// on sélectionne la fin de la suggestion
if(_inputField.createTextRange){
var t=_inputField.createTextRange();
t.moveStart("character",_currentInputFieldValue.length);
t.select()
}else if(_inputField.setSelectionRange){
_inputField.setSelectionRange(_currentInputFieldValue.length,_inputField.value.length)
}
}
}else{
// sinon, plus aucune suggestion de sélectionnée
_highlightedSuggestionIndex=-1;
}
}Cette méthode est une des plus longues et complexes de ce script d'autocomplétion, car elle est centrale dans notre mécanisme. Son exécution est la suivante :
- Suppression de l'index de la suggestion précédemment sélectionnée, et recopie du div contenant les suggestions dans la variable globale _completeDivDivList ;
- Si le champ est vide ou qu'on n'a aucune suggestion, on cache les possibilités de suggestions, sinon, on les affiche ;
- On recherche si le texte utilisateur entré correspond à un début de suggestion (_currentInputFieldValue contient l'entrée utilisateur) ;
- On désélectionne toutes les suggestions et éventuellement, on resélectionne celle qui correspond à notre début de texte ;
- On filtre les touches spéciales (comme page up/page down et autres) qui ont pour effet d'arrêter les suggestions ;
- Si on n'est pas dans le cas d'une touche spéciale et qu'on a trouvé une suggestion possible, on met en place dans le champ texte cette suggestion en sélectionnant la partie suggérée.
III-B-2. Méthodes de gestion de la surbrillance▲
Nous avons utilisé dans les fonctions précédentes un certain nombre de fonctions pour la gestion de la surbrillance et des sélections dans les champs textes que nous n'avons pas encore mises en place.
var _cursorUpDownPressed = null;
// permet le blur du champ texte après que la touche haut/bas a été pressée.
// le focus est récupéré après traitement (via le timeout).
function blurThenGetFocus(){
_cursorUpDownPressed=true;
_inputField.blur();
setTimeout("_inputField.focus();",10);
return
}La méthode blurThenGetFocus est déclenchée après l'appui sur la touche haut/bas. Elle effectue un blur sur notre champ texte, pour que l'utilisateur voie bien le changement de suggestion dans la liste des suggestions et récupère le focus pour notre champ texte.
// taille de la sélection dans le champ input
function rangeSize(n){
var N=-1;
if(n.createTextRange){
var fa=document.selection.createRange().duplicate();
N=fa.text.length
}else if(n.setSelectionRange){
N=n.selectionEnd-n.selectionStart
}
return N
}
// taille du champ input non sélectionne
function beforeRangeSize(n){
var v=0;
if(n.createTextRange){
var fa=document.selection.createRange().duplicate();
fa.moveEnd("textedit",1);
v=n.value.length-fa.text.length
}else if(n.setSelectionRange){
v=n.selectionStart
}else{
v=-1
}
return v
}
// Place le curseur à la fin du champ
function cursorAfterValue(n){
if(n.createTextRange){
var t=n.createTextRange();
t.moveStart("character",n.value.length);
t.select()
} else if(n.setSelectionRange) {
n.setSelectionRange(n.value.length,n.value.length)
}
}Les trois méthodes rangeSize, beforeRangeSize et cursorAfterValue permettent d'accéder, de façon indépendante du navigateur, respectivement à la longueur de la sélection dans un champ, la longueur de texte avant la sélection (qui correspond dans notre cas à la longueur de l'entrée utilisateur) et de placer le curseur tout à la fin du champ texte en créant une sélection de longueur nulle à la fin du champ.
// Retourne la valeur de la possibilité (texte) contenue dans une div de possibilité
function getSuggestion(uneDiv){
if(!uneDiv) {
return null;
}
return trimCR(uneDiv.getElementsByTagName('span')[0].firstChild.data)
}
// supprime les caractères retour chariot et line feed d'une chaîne de caractères
function trimCR(chaine){
for(var f=0,nChaine="",zb="\n\r"; f<chaine.length; f++) {
if (zb.indexOf(chaine.charAt(f))==-1) {
nChaine+=chaine.charAt(f);
}
}
return nChaine
}La méthode getSuggestion retourne la valeur de la suggestion contenue dans un div donnée. Cette fonction utilise trimCR pour supprimer les sauts de ligne qui pourrait éventuellement s'être insérés dans les suggestions au moment du dialogue XML.
// Cache complètement les choix de complétion
function hideCompleteDiv(){
_completeDiv.style.visibility="hidden"
}
// Rend les choix de completion visibles
function showCompleteDiv(){
_completeDiv.style.visibility="visible";
setCompleteDivSize()
}Les fonctions hideCompleteDiv et showCompleteDiv permettent d'afficher ou de cacher la liste des complétions possibles.
// Change la suggestion en surbrillance
function highlightNewValue(C){
if(!_completeDivDivList||_completeDivRows<=0) {
return;
}
showCompleteDiv();
if(C>=_completeDivRows){
C=_completeDivRows-1
}
if(_highlightedSuggestionIndex!=-1&&C!=_highlightedSuggestionIndex){
setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDiv");
_highlightedSuggestionIndex=-1
}
if(C<0){
_highlightedSuggestionIndex=-1;
_inputField.focus();
return
}
_highlightedSuggestionIndex=C;
_highlightedSuggestionDiv=_completeDivDivList.item(C);
setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDivAct");
_inputField.value=getSuggestion(_highlightedSuggestionDiv);
}Enfin, la méthode highlightNewValue est utilisée pour mettre en surbrillance une nouvelle suggestion de la liste.
Notre travail sur la gestion des touches et de la surbrillance est suffisamment abouti pour que nous puissions jeter un œil au résultat obtenu.
Le travail qu'il nous reste à faire est maintenant plus de l'ordre des détails.
III-C. Gestion de la souris▲
Une amélioration que nous pouvons encore apporter facilement est la gestion de la souris dans un choix de suggestion.
// déclenchée quand on clique sur une div contenant une possibilité
var divOnMouseDown=function(){
_inputField.value=getSuggestion(this);
_documentForm.submit()
};
// déclenchée quand on passe sur une div de possibilité. La div précédente est passée en style normal
var divOnMouseOver=function(){
if(_highlightedSuggestionDiv) {
setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDiv");
}
setStylePourElement(this,"AutoCompleteDivAct")
};
// déclenchée quand la souris quitte une div de possibilité. La div repasse a l'état normal
var divOnMouseOut = function(){
setStylePourElement(this,"AutoCompleteDiv");
};Ces méthodes sont liées aux div de suggestions lors de lors création dans la méthode metsEnPlace.
nouveauDiv.onmousedown=divOnMouseDown;
nouveauDiv.onmouseover=divOnMouseOver;
nouveauDiv.onmouseout=divOnMouseOut;Elles font en sorte que la suggestion actuellement survolée soit mise en surbrillance et permette à l'utilisateur de cliquer sur une des suggestions pour la sélectionner et valider le formulaire.
III-D. Détails finals▲
Nous allons encore mettre en place quelques petits gestionnaires pour que la finition de notre autocomplétion soit réellement bonne.
Le premier gestionnaire est placé sur le onresize de la page. En effet, un resize de la page peut causer un déplacement/changement de taille de notre champ texte, il faut donc que la liste de suggestions s'adapte.
// Handler de resize de la fenêtre
var onResizeHandler=function(event){
// recalcule la taille des suggestions
setCompleteDivSize();
}Le deuxième et dernier gestionnaire que nous mettrons en place est sur le blur de notre champ texte. Dans ce cas, nous devons cacher les possibilités de complétion, et si la touche pressée est tab, passer directement au bouton submit du formulaire.
// Handler de blur sur le champ texte
var onBlurHandler=function(event){
if(!_cursorUpDownPressed){
// si le blur n'est pas causé par la touche haut/bas
hideCompleteDiv();
// Si la dernière touche pressée est tab, on passe au bouton de validation
if(_lastKeyCode==9){
_submitButton.focus();
_lastKeyCode=-1
}
}
_cursorUpDownPressed=false
};Cette méthode réutilise les variables globales mises en place par nos gestionnaires de touches (_cursorUpDownPressed et _lastKeyCode) pour savoir si le blur est causé par un appui sur les touches haut/bas (dans ce cas, nous n'avons pas besoin de cacher les suggestions). Si ce n'est pas le cas, la liste de suggestions est cachée, et si c'est la touche tab qui a été pressée, nous mettons le focus directement sur le bouton submit du formulaire.
Nous pouvons maintenant consulter la dernière version de notre autocomplétion. On voit que cela se rapproche énormément de l'interface mise en place par Google Suggest. La compatibilité IE6/Firefox1.5 est totale. Le script a un fonctionnement dans Opera8.5 qui est adéquat, bien qu'il n'y ait pas de mise en surbrillance, suite au problème d'insertion de style. La page est complètement transparente pour les gens n'utilisant pas JavaScript et se comporte comme un simple formulaire (la soumission du formulaire, dans cet exemple, déclenche un message javascript qui n'est bien sûr pas disponible si javascript est désactivé, mais généralement le formulaire pointe vers une nouvelle page).