Partage
  • Partager sur Facebook
  • Partager sur Twitter

Select2 et optgroup

Sujet résolu
    14 février 2024 à 16:02:43

    Bonjour,

    J'ai une liste déroulante "select" avec des optgroup et des "options" à l'intérieur, rien de particulier.

    J'utilise le JS Select2 pour faire des recherches dans cette liste et je souhaiterais que si le résultat renvoie un optgroup, que toutes les options se trouvant à l'intérieur soient présentes aussi dans le résultat affiché.

    Exemple :

    <optgroup label="Swedish Cars">
    	<option value="volvo">Volvo</option>
    	<option value="saab">Saab</option>
    </optgroup>
    	<optgroup label="German Cars">
    	<option value="mercedes">Mercedes</option>
    	<option value="audi">Audi</option>
    </optgroup>

    Si je fais une recherche sur "German", alors je voudrais que la liste de résultat m'affiche l'optgroup, mais aussi les options "Mercedes" et "Audi" se trouvant à l'intérieur.
    Actuellement il ne m'affiche que l'optgroup, que je ne peux pas sélectionner, donc aucun intérêt.

    Par avance, merci ! :)

    EDIT :

    Après moult recherches je me réponds à moi-même si jamais d'autres sont dans le même cas :

    $('#id').select2({
                matcher(params, data) {
                    const originalMatcher = $.fn.select2.defaults.defaults.matcher;
                    const result = originalMatcher(params, data);
                    if (result && data.children && result.children && data.children.length) {
                        if (data.children.length !== result.children.length && data.text.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '').includes(params.term.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, ''))) {
                            result.children = data.children;
                        }
                        return result;
                    }
                    return null;
                }
            });

    Avec ça, affichage des optgroup avec les options à l'intérieur, et ignorance des accents pour la recherche. :)

    -
    Edité par jouvrard 15 février 2024 à 10:33:28

    • Partager sur Facebook
    • Partager sur Twitter

    Select2 et optgroup

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown