merisia-combobox

<merisia-combobox>

Menu déroulant avec filtrage par saisie de texte. Étend merisia-select avec un champ de recherche qui filtre les options en temps réel. Implémente le pattern ARIA combobox pour une accessibilité optimale.

Import

import '@merisia-inc/merisia-components/combobox';

Extension

Vous pouvez sous-classer ce composant pour ajouter ou redéfinir des propriétés, méthodes ou styles : 

import { customElement } from 'lit/decorators.js';
import { MerisiaCombobox } from '@merisia-inc/merisia-components';

@customElement('my-combobox')
export class MyCombobox extends MerisiaCombobox {
  // Ajoutez ou redéfinissez des propriétés, méthodes ou styles ici.
}

Démos

Basique

<merisia-combobox id="province" label="Province" name="province"></merisia-combobox>
<script>
  document.getElementById('province').options = [
    { value: 'qc', label: 'Québec' },
    { value: 'on', label: 'Ontario' },
  ];
</script>

Avec groupes d'options

<merisia-combobox id="pays" label="Pays" name="pays" filter-placeholder="Rechercher un pays…"></merisia-combobox>
<script>
  document.getElementById('pays').options = [
    {
      label: 'Amérique du Nord',
      options: [
        { value: 'ca', label: 'Canada' },
        { value: 'us', label: 'États-Unis' },
      ],
    },
  ];
</script>

Avec erreur

Lecture seule

const el = document.querySelector('merisia-combobox');
el.readonly = true;

Tri automatique

La propriété autosort, héritée de merisia-select, trie les options par leur texte affiché, insensible aux accents et à la casse. 

<merisia-combobox autosort id="province" label="Province" name="province"></merisia-combobox>
<script>
  document.getElementById('province').options = [
    { value: 'qc', label: 'Québec' },
    { value: 'on', label: 'Ontario' },
    { value: 'bc', label: 'Colombie-Britannique' },
    { value: 'ab', label: 'Alberta' },
    { value: 'nb', label: 'Nouveau-Brunswick' },
    { value: 'ns', label: 'Nouvelle-Écosse' },
    { value: 'mb', label: 'Manitoba' },
    { value: 'sk', label: 'Saskatchewan' },
    { value: 'pe', label: 'Île-du-Prince-Édouard' },
    { value: 'nl', label: 'Terre-Neuve-et-Labrador' },
  ];
</script>

Propriétés

Hérite de toutes les propriétés de merisia-select.

Propriété Attribut Type Défaut Description
filterPlaceholder filter-placeholder string 'Rechercher…' Placeholder du champ de saisie pour le filtrage
noResultsText no-results-text string 'Aucun résultat' Texte affiché quand aucune option ne correspond au filtre
Propriétés héritées de merisia-select : options, placeholder, show-empty, autosort, sort-direction, label, hint, errors, name, value, required, disabled, width, lang

Accessibilité

Ressources externes