La création d’un composant de liste déroulante de sélection personnalisée est l’une des exigences les plus courantes dans le développement Web. La liste déroulante Sélectionner permet à l’utilisateur de choisir une valeur dans une liste prédéfinie. Peut-être vous demandez-vous:

« Pourquoi dois-je créer un composant de liste déroulante de sélection personnalisé, s’il existe déjà une balise de sélection HTML? Je peux appliquer un style CSS et c’est tout! »

Malheureusement, la liste déroulante de sélection de style n’est pas si simple. L’élément de sélection HTML natif ne nous permet pas de définir des balises d’option de style.

De nos jours, les listes déroulantes de sélection apparaissent dans de nombreuses variantes. Vous pouvez trouver diverses bibliothèques javascript et frameworks css , qui ont leur propre implémentation pour les listes déroulantes de sélection personnalisées. Elles ont une fonctionnalité éprouvée pour plusieurs navigateurs et sont très fiables. Souvent, vous n’avez pas besoin d’utiliser de bibliothèques ou de frameworks, car dans de nombreux cas, la création d’une liste déroulante de sélection personnalisée est facile tâche.

Dans ce billet de blog, je souhaite partager avec vous comment vous pouvez créer une liste déroulante de sélection fonctionnelle sans utiliser de bibliothèques ni de frameworks. Vous pouvez appliquer un style pour sélectionner des options et y ajouter des composants personnalisés.

Avant de commencer à créer une liste déroulante de sélection personnalisée, vous devez demander au questions suivantes:

La liste déroulante de sélection aura-t-elle des centaines ou des milliers d’options?

Les utilisateurs peuvent-ils sélectionner plusieurs options?

Dans les deux cas, vous devrez utiliser un bibliothèque tierce, car sa propre implémentation peut prendre beaucoup de temps. Si vous avez besoin d’une liste déroulante avec des centaines d’options, vous devez fournir aux utilisateurs une fonction de recherche. Si la liste déroulante a des milliers d’options, vous devez utiliser la technique de « fenêtrage ». Pour plus d’informations, consultez la liste déroulante de sélection avancée.

Exemple de liste déroulante de sélection personnalisée

Ici, vous pouvez voir l’élément de sélection par défaut, qui peut avoir un aspect un peu différent selon le navigateur que vous utilisez.

Dans ce didacticiel, nous allons transformer l’élément de sélection par défaut en:

Le HTML

Traditionnellement, lorsque vous devez créer une liste déroulante de sélection personnalisée, vous utilisez la structure suivante.

Comme nous ne pouvons pas utiliser la balise select, nous avons plus d’options pour choisir la structure html . Nous pouvons utiliser des éléments ul et li ou div avec span éléments. Optez pour la structure div et span.

Le CSS

C’est une bonne idée de commencez par une réinitialisation css, ce qui réduit les incohérences du navigateur. J’ai opté pour la réinitialisation css d’Eric Meyer:

Source: https://meyerweb.com/eric/tools/css/reset/

Je préfère en utilisant le modèle de boîte où width = largeur de l’élément + remplissage + bordures.

Tout d’abord, nous avons ajouté un style de base pour les éléments html. <div class=”custom-select”> la position est relative, car nous devons appliquer un positionnement absolu pour la liste déroulante.

Le CSS suivant est utilisé pour la flèche déroulante.

Vous pouvez voir la transition et la transformation des propriétés CSS3. La transition est utilisée pour les fondus entrants et sortants de la liste déroulante. Transform est utilisé pour animer la flèche, dont la direction représente l’état de la liste déroulante.

Le JavaScript

Vous n’avez pas besoin d’utiliser des bibliothèques tierces pour la manipulation de dom. Pour une liste déroulante simple, vous n’avez besoin que des événements javascript de base.

Nous avons ajouté une fonction de clic au wrapper. Cliquez sur la fonction pour faire basculer la classe .open, qui indique si la liste d’options est ouverte ou fermée. À l’intérieur de la fonction de clic, nous recherchons <div class=”custom-select”> par this.querySelector(".custom-select"). This la fonction de clic à l’intérieur représente l’élément cliqué. Nous n’interrogons pas le document entier par document.querySelector(".custom-select") au cas où nous aurions plus de listes déroulantes à l’intérieur du DOM.

Dans l’extrait de code javascript ci-dessus, nous parcourons toutes les options et ajoutons un clic , qui modifie l’option sélectionnée en ajoutant la classe .selected. Encore une fois, à l’intérieur de la fonction de clic, nous interrogeons dans l’option cliquée (this dans l’extrait de code), au cas où nous voudrions changer les gestionnaires d’événements pour prendre en charge plusieurs listes déroulantes sur une page.

Le dernier extrait est facultatif et permet de fermer la liste déroulante, si l’utilisateur clique hors de la liste déroulante.

Plusieurs listes déroulantes de sélection sur une page

Si nous voulons utiliser plusieurs listes déroulantes de sélection sur une page, nous devons associer l’écouteur de clic à tous les éléments .custom-select-wrapper et fermer toutes les listes déroulantes si l’utilisateur clique en dehors d’une liste déroulante.

Liste déroulante de sélection avancée

Si vous avez besoin d’une liste déroulante de sélection avec des centaines d’options ou une sélection multiple, vous pouvez vérifier certaines des bibliothèques disponibles. Dans cet article, vous pouvez voir une comparaison des bibliothèques les plus populaires.

Au cas où vous auriez besoin de traiter des milliers d’options, vous ne pouvez pas rendre un DOM avec des milliers d’éléments d’options.Si vous ne pouvez pas utiliser de back-end, vous devrez utiliser la technique de « fenêtrage ».

Qu’est-ce que la technique de « fenêtrage »?

Plutôt que de rendre des milliers d’éléments à partir d’une liste à une fois, le «fenêtrage» ou la virtualisation se concentre sur le rendu uniquement des éléments visibles pour l’utilisateur. Vous pouvez consulter ce discours de Brian David Vaughn sur l’implémentation de la technique de «fenêtrage», qui est facile à mettre en œuvre et peut fournir d’énormes gains de performances.

Conclusion

J’espère que ce billet de blog vous aidera à créer un composant de liste déroulante de sélection personnalisé. Dans un premier temps, vous devez savoir si la liste déroulante de sélection contient de nombreuses options ou si les utilisateurs peuvent sélectionner plusieurs options. Si vous avez besoin d’un composant de sélection de base, l’article de blog décrit la mise en œuvre complète en HTML, CSS et JavaScript. Vous pouvez vérifier le code source sur Github.