Un input select à la manière de select2 en pure javascript

Select2 vous offre une zone de sélection personnalisable avec prise en charge de la recherche dans une liste, un peu comme un élément de formulaire select ou une autocompletion, select2 utilise jQuery. Cet article expose une implémentation d’une zone de saisie input avec autocompletion en pure javascript avec un test sur les lettres qui compose la chaîne entrée, et la réduction des éléments de la liste qui correspondent à la zone entrée. Le test utilisé est décrit dans l’article Tester si une chaîne contient tous les caractères d’une autre chaîne en javascript de ce blog.

Un input select sur fond du Sea Cliff Bridge près de Wollongong au sud de Sydney en Australie

Démo

Code HTML

Le code HTML HyperText Markup Language est simple et comporte la zone de saisie input, et une division div qui contiendra les éléments de la liste. Dans l’exemple suivant, la liste est obtenue à partir d’une requête à une table. Une division avec la classe dropdown-select enveloppe la division label qui contient la zone de saisie input avec le nom name author, ce nom peut être modifié et d’un attribut placeholder qui sera animé comme dans l’article Effet de placeholder sur un input. Ce label est suivi d’une liste simple agissant comme la liste d’un select où les options sont sélectionnables. Lors de la saisie, seules les options contenant les lettres de cette saisie sont conservées. Si aucune option ne convient, la liste n’est pas affichée.

Le chevron à droite de la zone de saisie fait partie d’une police d’icone. La classe est icon-arrow-down, qu’il faut intégrer dans une feuille de style. Au développeur de modifier le code pour utiliser cette fonctionnalité.

  • La liste écrite dans le dropdown est issue d’une requête à une base de donnée,
  • L’attribut name de la zone de saisie peut être changé,

Styles SCSS

  • Le mixin wp-md est destiné à gérer les @media queries dans la partie administration de WordPress,
  • Le placeholder de la zone de saisie est animé comme dans l’article Effet de placeholder sur un input

Ce qui donne en version minifiée :

Javascript

Tout cela est bien-sûr à adapter en fonction des styles et scripts déjà présents, comme dans la partie backend de WordPress.

Et hop, une zone de saisie, accompagnée d’une autocompletion dont ne sont visibles que les options contenant les lettres entrées.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.