Search fields (Champs de recherche)

Lorsqu’un service présente une grande quantité de données, le champ de recherche (input search)permet à l’utilisateur de saisir des caractères afin de trouver rapidement un contenu. Ce composant fait partie à part entière du principe de navigation.

Usage

• Le champ de recherche est un champ de texte avec quelques spécificités :
  • Le label est absent.
  • Le texte du placeholder permet à l’utilisateur de connaître la fonction du champ. Il est obligatoire, précis et concis, ex : Rechercher une commune.
  • L’icône Loupe, de type Information (à gauche) est toujours présente dans le champ de recherche.
  • L’icône Vider le champ, de type Action (à droite) est facultative.

Auto-complétion

• L’auto-complétion est une fonctionnalité permettant à l’utilisateur de limiter la quantité d’informations qu’il saisit avec son clavier. Il est guidé dans la construction d’une requête en se voyant proposer un complément qui contient la chaîne de caractères qu’il a commencée à taper.
• Chaque suggestion est normée :
  • La 1^re lettre du texte est en majuscule, le reste est en minuscule.
  • Le contenu se limite à une seule ligne.
  • L’ordre est établi de manière logique : selon la pertinence, l’ordre alphabétique, etc.
  • Afin de faciliter la lecture, seules les premières lettres des suggestions sont les caractères saisis. Quand l’utilisateur tape "Sév", "Cesson-Sévigné" ne s’affiche pas.
• Le nombre de suggestions est normé :
  • Ce nombre est libre selon la nature et l’usage du composant, ex. : un search de la même nature et déjà présent sur le site aura le même nombre de suggestions.
  • 10 suggestions maximum sont présentes et visibles à la fois. Il n’y a donc pas de scroll.
  • Lorsque la nature du search est une ville, seules 5 suggestions au plus sont présentes.

Bonnes pratiques

• Mettre le champ de recherche là où les utilisateurs s’attendent de le trouver.
• La largeur du champ doit être suffisante : le champ contient au moins 27 caractères visibles.
• La validation de la recherche au clavier est préférable.
• Dans le cas d’une auto-complétion, les suggestions doivent être utiles et pertinentes. Celles qui sont mal conçues peuvent troubler et distraire les utilisateurs.
• Le champ de recherche peut afficher des suggestions dès qu’il est sélectionné, par exemple les plus consultées.
• Des outils permettent d’améliorer l’expérience utilisateur : correcteur d’orthographe, texte prédictif, etc.

Style & code

Techniquement, la recherche peut être faite de 2 façons : via une requête au serveur ou via une requête Ajax. Il n’est pas dans les attributions de SipaUI de faire un choix technique pour vous sur la méthode à utiliser, ni d’expliquer le fonctionnement de ces techniques proprement dites. Toutefois, nous préconisons la méthode Ajax qui est plus souple (notamment pour l’autocomplétion) et permet d’offrir un meilleur service à l’utilisateur.

Standard

La méthode Ajax n’impose pas un code HTML aussi « complet » que la méthode serveur (pas besoin de <form> ou d’attribut name, action, de bouton submit…). Toutefois on continuera à utiliser ces éléments dans les exemples ci-dessous pour qu’ils fonctionnent avec la méthode serveur. Cela permet aussi d’avoir un code plus standard et donc potentiellement mieux interprété dans le cadre de l’accessibilité. Cela permet enfin à Safari iOS d’afficher sur le clavier un bouton bleu « rechercher » à la place du bouton standard gris « retour ».

Ce composant utilise un <input type="search">. Basiquement, cet input se comporte comme un <input type="text">, sauf que certains navigateurs lui rajoutent une fonctionnalité de vidange du champ avec une croix positionnée à droite. Cette fonctionnalité est bien pratique, mais son design n’est pas adaptable et surtout, au jour d’écriture de ces lignes, elle est absente de 2 navigateurs : Firefox (v. 110) et Safari mobile (v. 16, alors que Safari Mac l’intègre !). Par conséquent, ce comportement est désactivé et recréé afin qu’il fonctionne partout et avec un même design.

<form action="search" class="su-search su-label-icon su-input-actions-1">
    <label for="input1">
        <span class="su-icon">chercher</span>
    </label>
    <input id="input1" type="search" placeholder="Recherchez Lorem ipsum" aria-label="Recherchez Lorem ipsum" name="recherche" class="su-on-focus" data-sutoggleclass='{"parent":".su-search","klass":"su-js-show"}' required>
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action" data-suemptyinput>
            <i class="su-icon">vider</i>
        </button>
    </div>
    <button type="submit" name="validation">
        <span class="su-icon">chercher</span>
    </button>
</form>

Explications complémentaires

<form> :

• L’action est là pour permettre à Safari iOS d’afficher son bouton de recherche.
• Les classes su-search, su-label-icon (pour positionner la loupe en label) et su-input-actions-1 (pour réserver l’espace nécessaire à la croix de vidange, comme sur le composant Text-fields). Ces classes doivent être sur le parent englobant du composant, ici c’est le <form>, mais si votre formulaire doit contenir d’autres contenus que le champ de recherche, un <div> doit être ajouté pour jouer ce rôle. Ce sera alors ce <div> qui portera ces classes…

<label> :

• Il s’agit de l’icône-label disponible avec le composant Text-fields, il n’a pas besoin du composant label. Comme tout label, il sert à préciser le but du champ, ici il affiche donc la loupe en début de champ.
• Le for pour cibler l’input.
• L’icône avec <span class="su-icon">chercher</span>.

<input> :

• Le placeholder, comme expliqué sur la page design, est obligatoire et doit être précis pour indiquer à l’utilisateur l’usage de ce champ en l’absence de libellé.
• L’aria-label sert pour l’accessibilité. Il suffit de reprendre la valeur du placeholder.
• Le name est là pour la validité du formulaire. Il est indispensable si vous utilisez ce composant avec une validation serveur. N. B – la valeur standard pour ce type de champ est q, mais vous pouvez mettre ce que vous voulez…
• Le required pour rendre de champ obligatoire à la validation du formulaire.
• Le data-sutoggleclass='{"parent":".su-search","klass":"su-js-show"}' pour gérer l’apparition de la croix.
• La classe su-on-focus pour associer l’apparition de la croix au focus (classe issue du composant JS Toggleclass).
• Vous pouvez ajouter si vous le souhaitez des contraintes de validation avec minlength, maxlength ou un pattern. Mais dans ce cas, il vous faut l’expliquer à l’utilisateur via le placeholder ou un texte sous le champ.
• Cet élément étant dimensionné par les CSS, l’attribut size est inutile.

<div class="su-input-actions-area"> (croix de vidange du champ) :

• Cf. la partie RAZ du composant Text-field pour plus d’explications.
• Attention ! Ne pas oublier le type="button" sur ce <button>, sans quoi le bouton soumettra le formulaire !

<button type="submit"> :

• Comme expliqué plus haut, ce bouton, dans ce type de champ de recherche sans serveur, n’a pas de fonction pour l’utilisateur. Il est quand même utile pour la validité du formulaire et est donc masqué par les CSS.
• Le name est là pour la validité du formulaire. Il est indispensable si vous utilisez ce composant avec une validation serveur.
• L’icône avec <span class="su-icon">chercher</span>.

Pour afficher la loupe, vous pouvez choisir d’afficher soit le label, soit le bouton. Ce choix dépend de votre mode de validation (Ajax ou serveur) ou d’un éventuel besoin de renvoyer vers une page de résultats de recherche en cliquant sur le bouton. Par défaut, c’est le label qui est utilisé, mais si vous mettez la classe su-submit sur le <form>, ce sera le bouton qui sera affiché, ce qui rendra la loupe cliquable.

Avec validation serveur (bouton submit actif)

Pour un champ de recherche avec validation serveur, il faut une action de l’utilisateur pour soumettre la recherche. Il faut donc que le bouton submit soit visible. Pour cela, on va utiliser le composant Input-group sans le label (pour l’accessibilité il reste le aria-label).

<form class="su-search su-input-group">
    <div class="su-input-actions-1">
        <input id="input2" type="search" placeholder="Recherchez Lorem ipsum" aria-label="Recherchez Lorem ipsum" name="recherche" class="su-on-focus" data-sutoggleclass='{"parent":".su-search","klass":"su-js-show"}' required>
        <div class="su-input-actions-area">
            <button type="button" class="su-input-action" data-suemptyinput>
                <i class="su-icon">vider</i>
            </button>
        </div>
    </div>
    <button type="submit" name="validation" class="su-button su-primary su-action-icon">
        <span class="su-icon">chercher</span>
    </button>
</form>

Explications complémentaires

(N’est mentionné ici que les différences avec le cas standard. Pour les explications sur ce qui est commun, se référer à celui-ci…)

<form> :

• La classe su-input-group permet de gérer l’assemblage de l’input et du bouton de validation.
• La classe su-input-actions-1 est déplacée sur un <div> enfant.

<div class="su-input-actions-1"> :

• il regroupe l’input et le bouton de vidange et gère l’affichage de ce dernier.

Inactif

Un champ de recherche peut être rendu inactif en ajoutant l’attribut readonly à l’input, l’attribut disabled sur le bouton et en supprimant le data-sutoggleclass.

<form action="search" class="su-search su-label-icon su-input-actions-1">
    <label for="input4">
        <span class="su-icon">chercher</span>
    </label>
    <input id="input4" type="search" placeholder="Recherchez Lorem ipsum" aria-label="Recherchez Lorem ipsum" name="recherche" class="su-on-focus" readonly>
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action" data-suemptyinput>
            <i class="su-icon">vider</i>
        </button>
    </div>
    <button type="submit" name="validation" disabled>
        <span class="su-icon">chercher</span>
    </button>
</form>

Autocomplétion

Vous trouverez donc ci-dessous juste un exemple du rendu attendu par SipaUI pour l’affichage du volet d’autocomplétion. Soit vous pouvez utiliser les classes de SipaUI pour afficher ce volet et du coup il sera directement bien designé, soit vous pouvez vous appuyer sur le doc-design et l’inspection de code pour créer vos propres CSS afin de vous rapprocher le plus possible de ce rendu.

<form action="search">
    <div class="su-search su-label-icon su-input-actions-1 su-autocomplete">
        <label for="input5">
            <span class="su-icon">chercher</span>
        </label>
        <input id="input5" type="search" name="recherche" placeholder="Recherchez Lorem ipsum" autocomplete="off" spellcheck="false" aria-label="Recherchez Lorem ipsum" role="combobox" aria-autocomplete="list" id="suggestions" class="su-on-focus" data-sutoggleclass='[{"parent":".su-search","klass":"su-js-show"}, {"parent":".su-search","klass":"su-open"}]' value="Vest">
        <div class="su-input-actions-area">
            <button type="button" class="su-input-action" data-suemptyinput>
                <i class="su-icon">vider</i>
            </button>
        </div>
        <button type="submit" name="validation">
            <span class="su-icon">chercher</span>
        </button>
        <ul id="suggestions" class="su-suggestions" role="listbox" aria-expanded="false">
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum amet</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum condimentum</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum euismod</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum ridiculus</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum sem</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum condimentum</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum euismod</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum amet</a></li>
            <li class="su-suggestion" role="option"><a href="javascript:;"><span>Vest</span>ibulum ridiculus</a></li>
        </ul>
    </div>
</form>

Cliquez dans le champ pour ouvrir le panneau d’autocomplétion. Faute de gestion de l’autocomplétion au sein de SipaUI, ce panneau est passif et ne change pas en fonction de la saisie.

Explications complémentaires

<form> :

• La classe su-autocomplete précise qu’il s’agit d’une version avec autocomplétion.
• La classe su-open doit être ajoutée par du JS pour ouvrir le panneau des propositions. Ici, le déclencheur est sur l’input quand il est activé en rentrant dedans.

input

• Facultatif : ajouter l’attribut autocomplete="off" afin d’empêcher le navigateur de perturber l’utilisateur en lui proposant une autocomplétion parasite (comme un historique de recherche déjà fait…)
• Facultatif : l’attribut spellcheck="false" est là pour empêcher la vérification orthographique. Peut être utile pour un moteur de recherche de communes…

<ul class="su-suggestions"> :

• Il s’agit de la liste des suggestions. Il est toutefois possible d’encapsuler cette liste dans un autre élément du DOM (comme un <div>) ou de ne pas utiliser d’<ul>, il faut juste que le parent le plus haut de cette liste porte cette classe su-suggestions (notez le "s" à la fin !).

<li class="su-suggestion"> :

• Il s’agit de chaque suggestion retournée (notez l’absence de "s" à la fin !).
• Ces suggestions sont découpées avec un <span> pour séparer la partie coïncidant avec la saisie (en maigre) du reste (en gras).

Accessibilité

Pour apporter de l’accessibilité à ce champ de recherche avec autocomplétion il va falloir ajouter plusieurs role aux objets :

• role="combobox" sur l’input,
• role="listbox" sur le conteneur des suggestions,
• role="option" sur chaque suggestion.

Par ailleurs, un mécanisme aria permet de gérer cette autocomplétion en ajoutant aria-autocomplete="list" et aria-owns="suggestions" (où suggestions est l’ID de la liste de suggestions) sur le champ de recherche et aria-expanded="true" sur la liste de suggestion quand celle-ci est affichée.