Combobox

Le combobox combine une liste déroulante et un champ de saisie pour rechercher puis sélectionner une ou plusieurs options parmi de nombreuses options possibles.

Exemples

Champ de saisie par défaut

Sur fond gris – "on layer"

Tailles

Petit

Grand

Avec sélection multiple

Effaçable

Avec options personnalisées

États

Désactivé (Disabled)

Désactivé en mode multiple

Lecture seule (Readonly)

Requis (Required)

Erreur (Error)

Erreurs multiples

Liste d’options chargées dynamiquement


                                                        
                                                        
                                                            const myCombobox = canvasElement.querySelector('dsa-combobox')!;
                                                            let listDownloaded = false;
                                                        
                                                            myCombobox.addEventListener('dsa-input', (e) => {
                                                              const currentInput = (e.currentTarget as DSACombobox).displayInput.value;
                                                              if (currentInput.length > 2 && !listDownloaded) {
                                                                myCombobox.fetchingState = 'loading';
                                                                myCombobox.show();
                                                        
                                                                // stall for 2 seconds
                                                                setTimeout(() => {
                                                                  // fetch data
                                                                  const url = `https://pokeapi.co/api/v2/pokemon/`;
                                                                  fetch(url)
                                                                    .then((response) => response.json())
                                                                    .then((data: { results: { name: string }[] }) => {
                                                                      const options = data.results;
                                                        
                                                                      myCombobox.items = options.map((item) => {
                                                                        const el = new DSAOption();
                                                                        el.value = item.name;
                                                                        el.textContent = item.name;
                                                                        return el;
                                                                      });
                                                        
                                                                      listDownloaded = true;
                                                                      myCombobox.fetchingState = 'success';
                                                                    })
                                                                    .catch((error: Error) => {
                                                                      myCombobox.fetchingState = 'error';
                                                                      console.error('Failed to fetch data from PokeAPI', error);
                                                                    });
                                                                }, 2000);
                                                              }
                                                            });

Code typescript associé

Avec un nombre d’options visibles limité