Conseils
Les composants de formulaire de recherche permettent aux utilisateurs de trouver du contenu précis ou de réaliser des tâches. Les utilisateurs peuvent saisir des mots-clés et accéder aux résultats correspondants dans le système. Les formulaires de recherche contribuent à l’expérience utilisateur en facilitant l’accès aux informations ou aux services offerts par un site Web ou une application. Le système de conception du GNB propose deux types de recherches :
- Recherche (avec bouton ou icône) : Il s’agit du type de formulaire de recherche le plus commun. Il comprend un champ de saisie de texte et un bouton ou une icône qui sont utilisés pour lancer la recherche.
- Recherche avec texte prédictif (et bouton ou icône) : CCe type de recherche, aussi connu sous le nom de formulaire de recherche à saisie automatique, propose des suggestions basées sur les données saisies par l’utilisateur avant même qu’il n’ait fini de taper sa requête. La saisie intuitive est particulièrement utile lorsque les utilisateurs ne sont pas certains de l’orthographe ou du nom complet de l’objet de leur recherche. Les prédictions sont généralement tirées d’une liste prédéterminée, comme des noms de villes, des titres ou des termes de recherche populaires.
À faire
- Affichez les résultats de recherche à l’aide d’une liste de contenu.
- Utilisez la saisie de texte intuitive pour faciliter la collecte de données de formulaire précises et prédéterminées (noms de ville, etc.).
À ne pas faire
- N’insérez pas le composant de recherche dans la section d’en-tête. Vous devez plutôt l’ajouter au composant de navigation principale.
- N’insérez pas le composant de recherche dans une fenêtre modale.
Recherche
Vous pouvez créer un champ de recherche assorti d’un bouton ou d’une icône. Ces deux formats doivent inclure des étiquettes masquées pour que le composant soit accessible aux personnes utilisant des technologies d’assistance. Le champ de recherche avec bouton est à privilégier, mais vous pouvez utiliser le champ de recherche avec icône lorsque l’espace est limité.
Recherche avec bouton
HTML
<!-- Recherche avec bouton -->
<form class="gnb-input-pair" role="search">
<label class="visually-hidden" for="search-field">Recherche</label>
<input type="search" id="search-field" />
<button class="gnb-btn-search"><span>Recherche</span></button>
</form>
Recherche avec icône
HTML
<!-- Recherche avec icône -->
<form class="gnb-input-pair" role="search">
<label class="visually-hidden" for="search-field-with-icon">Rechercher</label>
<input type="search" id="search-field-with-icon" />
<button class="gnb-btn-search-icon-white"><span><span class="sr-only">Rechercher</span></span></button>
</form>
Recherche avec saisie de texte intuitive
Vous pouvez appliquer la fonction de saisie de texte intuitive aux champs de recherche où les utilisateurs peuvent choisir un terme à partir de la liste prédictive ou saisir leurs propres mots-clés.
Ces exemples utilisent du JavaScript de base, mais vous pouvez ajouter votre propre fonctionnalité.
Recherche avec saisie de texte intuitive et bouton
HTML
<!-- Recherche avec saisie de texte intuitive et bouton -->
<form class="gnb-input-pair" autocomplete="off" role="search">
<label for="predictiveSearchBtn" class="visually-hidden">Commencez à taper pour trouver votre communauté</label>
<span class="autocomplete"><input id="predictiveSearchBtn" type="text" name="myCommunity" placeholder="Tapez pour rechercher..."></span>
<button class="gnb-btn-search"><span>Rechercher</span></button>
</form>
<!-- Ces exemples utilisent du JavaScript de base, mais vous pouvez ajouter votre propre fonctionnalité. -->
<script>
function autocomplete(inp, arr) {
/* la fonction d'autocomplétion prend deux arguments,
l'élément champ de texte et un tableau de valeurs autocomplétées possibles : */
var currentFocus;
/* exécutez une fonction lorsque quelqu'un écrit dans le champ de texte : */
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/* fermez toutes les listes déjà ouvertes de valeurs autocomplétées */
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/* créez un élément UL qui contiendra les éléments (valeurs) : */
a = document.createElement("ul");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* ajoutez l'élément comme enfant du conteneur d'autocomplétion : */
this.parentNode.appendChild(a);
/* pour chaque élément du tableau... */
for (i = 0; i < arr.length; i++) {
/* vérifiez si l'élément commence par les mêmes lettres que la valeur du champ de texte : */
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* créez un élément LI pour chaque élément correspondant : */
b = document.createElement("li");
/* rendez les lettres correspondantes en gras : */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* insérez un champ de saisie qui contiendra la valeur de l'élément du tableau actuel : */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* exécutez une fonction lorsque quelqu'un clique sur la valeur de l'élément (élément LI) : */
b.addEventListener("click", function(e) {
/* insérez la valeur pour le champ de texte d'autocomplétion : */
inp.value = this.getElementsByTagName("input")[0].value;
/* fermez la liste des valeurs autocomplétées,
(ou toute autre liste ouverte de valeurs autocomplétées) : */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* exécutez une fonction lorsque quelqu'un appuie sur une touche du clavier : */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("ul");
if (e.keyCode == 40) {
/* Si la touche flèche BAS est pressée,
augmentez la variable currentFocus : */
currentFocus++;
/* et rendez l'élément actuel plus visible : */
addActive(x);
} else if (e.keyCode == 38) { // haut
/* Si la touche flèche HAUT est pressée,
diminuez la variable currentFocus : */
currentFocus--;
/* et rendez l'élément actuel plus visible : */
addActive(x);
} else if (e.keyCode == 13) {
/* Si la touche ENTRÉE est pressée, empêchez le formulaire d'être soumis, */
e.preventDefault();
if (currentFocus > -1) {
/* et simulez un clic sur l'élément "actif" : */
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/* une fonction pour classer un élément comme "actif" : */
if (!x) return false;
/* commencez par retirer la classe "actif" sur tous les éléments : */
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/* ajoutez la classe "autocomplete-active" : */
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/* une fonction pour retirer la classe "actif" de tous les éléments d'autocomplétion : */
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/* fermez toutes les listes d'autocomplétion dans le document,
à l'exception de celle passée en argument : */
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/* exécutez une fonction lorsque quelqu'un clique dans le document : */
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
/* Un tableau contenant toutes les communautés du Nouveau-Brunswick : */
var communities = ["Alma", "Aroostook", "Atholville", "Baker Brook", "Balmoral", "Bas-Caraquet", "Bath", "Bathurst", "Bathurst", "Belledune", "Beresford", "Bertrand", "Blacks Harbour", "Blackville", "Bouctouche", "Bristol", "Cambridge-Narrows", "Campbellton", "Campbellton", "Campbellton", "Canterbury", "Cap-Pelé", "Caraquet", "Centreville", "Charlo", "Chipman", "Clair", "Dalhousie", "Dieppe", "Doaktown", "Dorchester", "Drummond", "Edmundston", "Edmundston", "Eel River Crossing", "Florenceville", "Florenceville-Bristol", "Fredericton", "Fredericton", "Fredericton Junction", "Gagetown", "Grand Bay-Westfield", "Grand Falls / Grand-Sault", "Grand Manan", "Grande-Anse", "Hampton", "Hartland", "Harvey", "Hillsborough", "Kedgwick", "Lac Baker", "Lamèque", "Le Goulet", "Maisonnette", "McAdam", "Meductic", "Memramcook", "Millville", "Minto", "Miramichi", "Miramichi", "Moncton", "Moncton", "Nackawic", "Neguac", "New Maryland", "Nigadoo", "Norton", "Oromocto", "Paquetville", "Perth-Andover", "Petit Rocher", "Petitcodiac", "Plaster Rock", "Pointe-Verte", "Port Elgin", "Quispamsis", "Rexton", "Richibucto", "Riverside-Albert", "Riverview", "Rivière-Verte", "Rogersville", "Rothesay", "Sackville", "Saint Andrews", "Saint John", "Saint-Antoine", "Saint-François de Madawaska", "Saint-Isidore", "Saint-Louis de Kent", "Saint-Léolin", "Saint-Léonard", "Saint-Quentin", "Sainte-Anne-de-Madawaska", "Sainte-Marie - Saint-Raphaèl", "Salisbury", "Shediac", "Shippagan", "St. André", "St. George", "St. Hilaire", "St. Leonard", "St. Martins", "St. Stephen", "Stanley", "Sussex", "Sussex Corner", "Tide Head", "Tracadie-Sheila", "Tracy", "Woodstock"]
autocomplete(document.getElementById("predictiveSearchBtn"), communities);
</script>
Recherche avec saisie de texte intuitive et icône
HTML
<!-- Recherche prédictive avec icône -->
<form class="gnb-input-pair" autocomplete="off" role="search">
<label for="predictiveSearchIcon" class="visually-hidden">Commencez à taper pour trouver votre communauté</label>
<span class="autocomplete"><input id="predictiveSearchIcon" type="text" name="myCommunity" placeholder="Tapez pour rechercher..."></span>
<button class="gnb-btn-search-icon-white"><span><span class="sr-only">Rechercher</span></span></button>
</form>
<!-- Javascript de base pour la liste prédictive. Placez juste avant la balise de fermeture du corps en bas de votre page -->
<script>
function autocomplete(inp, arr) {
/* la fonction d'autocomplétion prend deux arguments,
l'élément champ de texte et un tableau de valeurs autocomplétées possibles : */
var currentFocus;
/* exécutez une fonction lorsque quelqu'un écrit dans le champ de texte : */
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/* fermez toutes les listes déjà ouvertes de valeurs autocomplétées */
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/* créez un élément UL qui contiendra les éléments (valeurs) : */
a = document.createElement("ul");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* ajoutez l'élément comme enfant du conteneur d'autocomplétion : */
this.parentNode.appendChild(a);
/* pour chaque élément du tableau... */
for (i = 0; i < arr.length; i++) {
/* vérifiez si l'élément commence par les mêmes lettres que la valeur du champ de texte : */
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* créez un élément LI pour chaque élément correspondant : */
b = document.createElement("li");
/* rendez les lettres correspondantes en gras : */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* insérez un champ de saisie qui contiendra la valeur de l'élément du tableau actuel : */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* exécutez une fonction lorsque quelqu'un clique sur la valeur de l'élément (élément LI) : */
b.addEventListener("click", function(e) {
/* insérez la valeur pour le champ de texte d'autocomplétion : */
inp.value = this.getElementsByTagName("input")[0].value;
/* fermez la liste des valeurs autocomplétées,
(ou toute autre liste ouverte de valeurs autocomplétées) : */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* exécutez une fonction lorsque quelqu'un appuie sur une touche du clavier : */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("ul");
if (e.keyCode == 40) {
/* Si la touche flèche BAS est pressée,
augmentez la variable currentFocus : */
currentFocus++;
/* et rendez l'élément actuel plus visible : */
addActive(x);
} else if (e.keyCode == 38) { // haut
/* Si la touche flèche HAUT est pressée,
diminuez la variable currentFocus : */
currentFocus--;
/* et rendez l'élément actuel plus visible : */
addActive(x);
} else if (e.keyCode == 13) {
/* Si la touche ENTRÉE est pressée, empêchez le formulaire d'être soumis, */
e.preventDefault();
if (currentFocus > -1) {
/* et simulez un clic sur l'élément "actif" : */
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/* une fonction pour classer un élément comme "actif" : */
if (!x) return false;
/* commencez par retirer la classe "actif" sur tous les éléments : */
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/* ajoutez la classe "autocomplete-active" : */
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/* une fonction pour retirer la classe "actif" de tous les éléments d'autocomplétion : */
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/* fermez toutes les listes d'autocomplétion dans le document,
à l'exception de celle passée en argument : */
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/* exécutez une fonction lorsque quelqu'un clique dans le document : */
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
/* Un tableau contenant toutes les communautés du Nouveau-Brunswick : */
var communities = ["Alma", "Aroostook", "Atholville", "Baker Brook", "Balmoral", "Bas-Caraquet", "Bath", "Bathurst", "Bathurst", "Belledune", "Beresford", "Bertrand", "Blacks Harbour", "Blackville", "Bouctouche", "Bristol", "Cambridge-Narrows", "Campbellton", "Campbellton", "Campbellton", "Canterbury", "Cap-Pelé", "Caraquet", "Centreville", "Charlo", "Chipman", "Clair", "Dalhousie", "Dieppe", "Doaktown", "Dorchester", "Drummond", "Edmundston", "Edmundston", "Eel River Crossing", "Florenceville", "Florenceville-Bristol", "Fredericton", "Fredericton", "Fredericton Junction", "Gagetown", "Grand Bay-Westfield", "Grand Falls / Grand-Sault", "Grand Manan", "Grande-Anse", "Hampton", "Hartland", "Harvey", "Hillsborough", "Kedgwick", "Lac Baker", "Lamèque", "Le Goulet", "Maisonnette", "McAdam", "Meductic", "Memramcook", "Millville", "Minto", "Miramichi", "Miramichi", "Moncton", "Moncton", "Nackawic", "Neguac", "New Maryland", "Nigadoo", "Norton", "Oromocto", "Paquetville", "Perth-Andover", "Petit Rocher", "Petitcodiac", "Plaster Rock", "Pointe-Verte", "Port Elgin", "Quispamsis", "Rexton", "Richibucto", "Riverside-Albert", "Riverview", "Rivière-Verte", "Rogersville", "Rothesay", "Sackville", "Saint Andrews", "Saint John", "Saint-Antoine", "Saint-François de Madawaska", "Saint-Isidore", "Saint-Louis de Kent", "Saint-Léolin", "Saint-Léonard", "Saint-Quentin", "Sainte-Anne-de-Madawaska", "Sainte-Marie - Saint-Raphaèl", "Salisbury", "Shediac", "Shippagan", "St. André", "St. George", "St. Hilaire", "St. Leonard", "St. Martins", "St. Stephen", "Stanley", "Sussex", "Sussex Corner", "Tide Head", "Tracadie-Sheila", "Tracy", "Woodstock"]
autocomplete(document.getElementById("predictiveSearchBtn"), communities);
</script>