Trucsweb.com

Trucsweb.com

CSS

Bootstrap

RDFFav

Bootstrap 4 - Barre de recherche avec sélection de catégorie

Barre de recherche avec la librairie Bootstrap qui aligne une sélection de catégories, la saisie de mots-clés et le bouton soumettre tout au bout.recherche,search,formulaire,dropdowns,jquery,validation,novalidateBootstrap 4 - Barre de recherche avec sélection de catégorie

Pour ceux qui ne serait pas familiers avec le cadriciel Bootstrap, je vous invite à consulter le tutoriel suivant, particulièrement la deuxième partie qui explique comment utiliser le fameux cadriciel.
Lilou, 13 novembre 2009

L’idée consiste à créer une belle barre de recherche qui alignerait une sélection de catégories, la saisie de mots-clés dans un champ input et le bouton soumettre tout au bout. La chance est de notre côté, car s’il fut une époque où il fallait coder le tout, il existe d’ailleurs un tas de code plus ou moins concluant sur le web, aujourd’hui il suffit de Bootstrap pour ce faire.

Deux techniques possible, avec l’élément HTML du formulaire « liste de sélection » select ou encore avec la composante « liste déroulante » dropdowns de Bootstrap. Il ne manque qu’un petit bout de code JavaScript pour transférer la valeur de la catégorie au formulaire dans ce dernier cas.


Exemple complet avec validation Bootstrap

Barre de recherche avec « liste de sélection » (select)

C’est la méthode la plus simple, la plus intuitive et la plus logique en utilisant un élément déjà disponible, liste de sélection, pour un formulaire. Avec un tout petit ajustement de la feuille de style. Commençons par grouper le tout avec la classe input-group. La sélection de la classe devant la saisie des mots-clés avec la classe input-group-prepend et le bouton « soumettre » (submit) après la saisie avec la classe input-group-append :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

<div class="container">
  <form class="form-inline" action="/recherche/" method="get">
    <fieldset>    
      <div class="input-group">
        <div class="input-group-prepend">
          <select id="oCategorie" name="oCategorie" class="form-control">
            <option selected="selected" value="0">Catégorie</option>
            <option value="1">...</option>
          </select>
        </div>
        <input id="oSaisie" name="oSaisie" type="text" class="form-control" aria-label="Saisie de mots clés" required="required">
        <div class="input-group-append">
          <button class="btn btn-primary" type="submit">Recherche</button>
        </div>
      </div>
    </fieldset> 
  </form>
</div>
Boite de recherche Bootstrap 4 selon le navigateur

Déjà Bootstrap ne suffit visiblement pas. Le formulaire à bien sûr une largeur variable à cause de la classe form-inline qu’il suffit d’enlever, mais bizarrement et malgré l’usage de la classe Bootstrap form-control, la flèche de la liste de sélection est celle par défaut du navigateur. De plus, la liste de sélection ne s’intègre pas du tout au groupe, comme s’il n’y avait aucune prise en charge par le groupe de saisie input-group! Et pourtant, quoi de plus naturel pour un formulaire d’avoir une liste de sélection ! Un oublie de Bootstrap ? Ce formulaire a néanmoins la capacité de fonctionner sans aucun code JavaScript, c’est uniquement la présentation qui jure...

Pour améliorer la présentation, retirer la classe form-inline et surtout utiliser la classe custom-select au lieu de form-control (!). Ça devrait régler le cas de la flèche. Il reste les deux rondeur au bout de la liste à supprimer en utilisant (pourquoi pas) toujours la même classe de Bootstrap inexplicablement nommée custom-select (!) :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

<style>
.custom-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
</style>

<div class="container">
  <form action="/recherche/" method="get">
    <fieldset>    
      <div class="input-group">
        <div class="input-group-prepend">
          <select id="oCategorie" name="oCategorie" class="custom-select bg-primary text-light">
            <option selected="selected" value="0">Catégorie</option>
            <option value="1">...</option>
          </select>
        </div>
        <input id="oSaisie" name="oSaisie" type="text" class="form-control" aria-label="Saisie de mots clés" placeholder="Mot(s) clé(s)" required="required">
        <div class="input-group-append">
          <button class="btn btn-primary" type="submit">Recherche</button>
        </div>
      </div>
    </fieldset> 
  </form>
</div>

Formulaire Bootstrap 4 avec liste de sélection (selects)

Voilà qui fait l’affaire, sans aucun code supplémentaire. Noter que dans cet exemple, j’ai essayé de donner la couleur primaire à la liste, comme le bouton. Rien d’exceptionnel, un simple fond bg-primary mais aussi un texte text-light et encore, reste la flèche... C’est pour démontrer une fois encore le manque de support de la liste de sélection par Bootstrap lui-même. Alors que l’exemple qui suit avec la « liste déroulante » (dropdowns), qui demande plus de programmation, n’a besoin que d’une simple classe exactement comme le bouton pour la même couleur...

Barre de recherche avec « liste déroulante » (dropdowns)

Ce formulaire est aussi groupé à l’aide de la classe input-group mais au lieu d’utiliser un élément du formulaire, le formulaire utilise une composante de Bootstrap, la liste déroulante dropdowns. Ce qui procure plus de flexibilité, par contre ce formulaire ne fonctionne pas seul. En effet, la sélection d’une catégorie n’est pas prise en charge par le formulaire, ce n’est pas un élément du formulaire, c’est normal. C’est-à-dire que non seulement la catégorie n’est pas transmise par le formulaire, mais la sélection ne fonctionne tout simplement pas sans JavaScript ni même sans jQuery ! Pire, la sélection ne modifie même pas l’étiquette ! Comme tous les exemples par Bootstrap de la composante dropdowns. Ironiquement, la liste déroulante est bien prise en charge cette fois par le groupe input-group, avec rondeur, couleurs de fond, etc (!)

Le formulaire est donc tout aussi simple et même de base, sans style particulier, mais avec JavaScript.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

<div class="container">
  <form>
    <fieldset>
      <input id="oCategorieValeur" name="oCategorieValeur" type="hidden" value="0" />
      <div class="input-group">
        <div class="input-group-prepend">
          <button id="oCategorie" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Catégorie</button>
          <div id="oCategorieListe" class="dropdown-menu">
            <a class="dropdown-item" data-valeur="0" href="#">Catégorie</a>
            <a class="dropdown-item" data-valeur="1" href="#">...</a>
          </div>
        </div>
        <input id="oSaisie" name="oSaisie" type="text" class="form-control" aria-label="Saisie de mots clés" placeholder="Mot(s) clé(s)" required="required">
        <div class="input-group-append">
          <button class="btn btn-primary" type="submit">Recherche</button>
        </div>
      </div>
    </fieldset> 
  </form>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

<script>
$(document).ready(function(e){
  // Boucler tous les hyperliens de la liste « oCategorieListe »
  // Et capturer le l’événement « click »
  $('#oCategorieListe').find('a').click(function(e) {
    // Prévenir une action
    e.preventDefault();
    // Changer l’étiquette (label) de la liste pour le contenu du lien
    $('#oCategorie').html($(this).html());
    // Assigner la valeur de l’attribut « data-valeur » à l’élément caché (hidden) du formulaire « oCategorieValeur »
    $('#oCategorieValeur').val($(this).attr("data-valeur"));
  });
});
</script>

Boite de recherche Bootstrap 4 selon le navigateur

Après avoir soumis ce dernier formulaire (avec la méthode GET), jeter un œil sur la barre d’adresse, vous devriez voir les paramètres ?oCategorieValeur=[Valeur]&oSaisie=[valeur]

Validation

Même si le navigateur valide déjà automatiquement le formulaire, par exemple les champs obligatoires required, un formulaire Bootstrap digne de ce nom a son propre système de validation ! Deux étapes, retirer la validation native du navigateur avec novalidate et ajouter un petit JavaScript pour le valider manuellement à l’aide de la classe avec-validation. Notez que cette méthode fonctionne en symbiose avec le DOM, mais il faut ajouter un espace pour afficher le message d’erreur automatique. Noter que l’expression régulière (pattern) est pour forcer l’usager à entrer au moins 3 caractères :

<form class="avec-validation" novalidate="novalidate">
  <div class="input-group">
    ...
    <input id="oSaisie" name="oSaisie" type="text" class="form-control" placeholder="Mot(s) clé(s)" aria-label="Saisie de mots clés" pattern=".{3,}" required="required">
    ...
    <div class="invalid-feedback">Veuillez entrer au moins 3 caractères.</div>
  </div>
</form>

<script>
(function() {
  // Script Bootstrap pour validation manuelle
  // car le formulaire n'est pas validé (novalidate)
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('avec-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      // Soumettre
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          // Non valide, arrête l’envoi
          event.preventDefault();
          event.stopPropagation();
        }
        // Classe de Bootstrap valide
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Voilà, ne reste plus qu’à faire la recherche, mais ça c’est une autre histoire ; -) Voir le résultat avec un peu plus de style Exemple complet avec validation Bootstrap.

, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 26912 - Pages vues : 28441
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @