Champs de formulaire à saisie semi-automatique
Champs de formulaire à saisie semi-automatique
-
Objectifs
- Etre capable de créer un formulaire à saisie semi-automatique
-
Présentation
- L’une des fonctionnalités d’aide les plus intéressants pour les visiteurs de vos sites consiste à minimiser la saisie qu’ils doivent effectuer dans les champs. En les aidant à remplir les formulaires proposant de nombreux choix, vous leur faites gagner du temps, leur évitez des efforts inutiles et les aidez en outre a saisir des données valides.
- Ce tutoriel combine le HTML, le CSS et le JavaScript pour présenter automatiquement une liste des Etats d’Amérique correspondant aux lettres tapées par l’utilisateur dans le champ de formulaire. Au fur et à mesure que l’utilisateur poursuit sa saisie, la liste se réduit jusqu’à qu’il ne reste qu’un seul état. Celui-ci est alors automatiquement placé dans le champ de saisie et la liste disparaît.
-
Créer les champs de formulaire à saisie semi-automatique
-
HTML
- La partie astucieuse concerne l’attribut
autocomplete. Celui-ci demande aux navigateurs de ne pas effectuer la saisie semi-automatique dans ce champ, puisque nous allons la gérer avec le script. -
CSS
-
Javascript
-
Analyse
document.getElementById("champsRecherche").onkeyup=rechercherSuggestion;- Pour récupérer et traiter chaque frappe de touche, nous avons besoin d’un gestionnaire d’événements. Le voici, dans
initAll() - Les noms des Etats d’Amérique ont peu de chances de changer. Nous pouvons lire le fichier XML (Script 15.3) une fois, initialiser notre tableau et supposer sans risque que notre liste sera encore valide à la fin de la session.
- C’est à cet endroit que nous lisons ce fichier en examinant chaque nœud, en récupérant le nœud label qu’il contient, puis en stockant l’élément
firstChildde cette étiquette (autrement dit, le nom de l’Etat lui-même). Chaque nom est placé dans un emplacement du tableauStatesArray. - L’exécution parvient ici lorsque l’ utilisateur commence à taper dans le champ. Nous sommes à l’intérieur de la fonction de gestionnaire d’événements
searchSuggest(). - Pour commencer, nous récupérons la valeur de searchField (ce que l’utilisateur a tapé jusque-là). Ensuite, nous effaçons l’attribut
classdu champ. - Si rien n’est entré, nous ne souhaitons rien faire. Nous vérifions donc ici que l’entrée de l’utilisateur possède une valeur avant de commencer à afficher des choix.
- Si le champ contient quelque chose, nous effaçons la précédente liste de possibilités.
- Nous parcourons maintenant en boucle la liste des Etats, en stockant chaque fois dans this – State l’Etat actuellement consulté.
- Nous voulons voir si ce que l’utilisateur a entré fait partie d’un nom d’Etat. Cela seul suffit. Nous souhaitons aussi nous assurer que ce l’utilisateur a entré se trouve au début du nom. Si l’utilisateur tape Kansas, il ne faut pas que la liste de choix propose Arkansas en plus de Kansas. Pendant cette vérification, nous for-çons le passage des deux termes en minuscules avant de vérifier
indexOf(). - Si
indexOf()retourne 0 (autrement dit, la chaîne entrée a été trouvée à la position 1 de thisState) nous savons que nous avons trouvé un Etat correspondant. - Cet état étant l’une des options possibles, nous souhaitons l’ajouter à la liste à afficher. Nous créons une div temporaire, attribuons à sa propriété innerHTML le nom de l’Etat, ajoutons un gestionnaire
onclicket unclassName, puis ajoutons le tout à la div popups. - L’ajout de chaque Etat sous forme de div séparée nous permet de les manipuler chacune en utilisant du code JavaScript et CSS.
- Lorsque nous avons parcouru tous les Etats, la configuration des choix est terminée. Combien de choix avons-nous ? C’est ce que nous vérifions ici. Le résultat est placé dans foundCt.
- Si
foundCtvaut 0, l’utilisateur a entré quelque chose d’inattendu. Nous le lui faisons savoir en attribuant la valeur "error" à className, ce qui passe en jaune l’arrière-plan du champ de saisie (d’après la règle de style CSS cité précédemment. - Si
foundCtvaut 1, nous savons qu’il ne reste qu’une seule possibilité et pouvons donc placer l’état correspondant dans le champ de saisie. Si l’utilisateur a tapé ca, il ne doit ras avoir a taper lifornia également. Nous savons déjà quel Etat doit être saisi. Nous donnons à l’utilisateur l’Etat complet en utilisant l’unique div dans popups pour remplir le champ de saisie et effaçons ensuite la div popups. - L’autre moyen offert à l’utilisateur d’enter un nom d’Etat consiste à cliquer sur l’un des choix du menu déroulant.
- Dans ce cas de figure. la fonction de gestionnaire d’événements
makeChoice()est appelée. Tout d’abord. nous vérifions sur quel Etat l’utilisateur a cliqué en examinant la cible (target) de l’événement. - Nous obtenons ainsi une div particulière. Sa propriété innerHTML contient le nom de l’Etat, que nous plaçons dans le champ de saisie. Pour finir, nous effaçons la liste des choix.
<style>
.idDiv{border: 2px solid blue;
border-radius: 6px;width:520px;margin: 10px;}
body, #champRecherche { font: 1.2em arial,
helvetica, sans-serif; }
.suggestions { background-color: #FFF;
padding: 2px 6px; border: lpx solid #000;}
.suggestions:hover { background-color: #69F;}
#popups { position: absolute; }
#champRecherche.error { background-color: #FFC; }
</style>xhr.onreadystatechange = setStatesArray;
xhr.open("GET", "us-states.xml", true);
xhr.send(null); if (xhr.responseXML){
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i++){
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}
var str = document.getElementById("searchField").value;
document.getElementById(usearchField").sclassName = "";
if (str !="") {
document.getElementById("popups").innerHTML = "";
for (var i=0; i<statesArray.length; i++) {
var thisState = statesArray[i].nodeValue;if (thisState.toLowerCase() .indexOf e(str.toLowerCase()) =-= 0) {
var tempDiv = document.createElement("div");
tempDiv.innerHTML = thisState;
tempDiv.onclick = makeChoice;
tespDiv.className ="suggestions";
document.getElementById("spopups").appendChild(tempDiv);
var foundCt = document.getElementById("popups").childNodes.length;
if (foundCt == 0) {
document.getElementBytd("champsRecherche").className = "error";
}if (foundCt == 1) {
document.getElementById("champsRecherche").value =
document.getElementById("popups").firstChild.innerHTML;
document.getElementById("popups").innerHTML = "";
} function makeChoice(evt) {
var thisDiv = (evt) ? evt.target:window.event.srcElement;
document.getElementById("champsRecherche").value = thisDiv.innerHTML;
document.getElementByld("popups").innerkTML = "";
}
