Select2 Plugin pour SPIP

Ce plugin pour SPIP intègre la bibliothèque javascript Select2 qui améliore l’usage des sélecteurs (balises <select>) natifs des navigateurs en facilitant entre autres la recherche d’un terme dans la liste.

Fonctionnement

Select2 est actif dans l’espace privé pour tous les select ayant la classe CSS select2. La configuration (Menu : Squelettes > Select2) permet de compléter les sélecteurs utilisés. Il est possible d’activer Select2 sur l’espace public depuis cette configuration.

Important: L’identifiant (l’attribut id) de la balise select doit être unique sur la page ; Select2 ne peut s’activer qu’une fois par identifiant (le dernier appelé).

Compléter la configuration par défaut

Select2 dispose de 2 manières d’adapter sa configuration :

• soit en transmettant des options en JSON lors de l’appel à la fonction jQuery .select2() (ou .spip_select2() qui l’enrichit légèrement)
• soit par les attributs data-xx sur la balise select, qui prennent alors le pas sur les options transmises à l’initialisation.

Par exemple :

<select class="select2" id="select1" name="demo" data-placeholder="Ça va ?">
    <option></option>
    <option value="oui">Yep!</option>
    <option value="non">Bof.</option>
</select>

jQuery("#select2").select2({"placeholder": "La forme ?"});

La documentation de Select2 sera donc à étudier :)

Addition du plugin SPIP

Des options supplémentaires non présentes dans le javascript par défaut sont ajoutées au plugin SPIP. Ces options sont disponibles :

• si vous utilisez les classes CSS prévues sur les select (.select2 ou tout autre configurée en plus par vos soins)
• si vous appelez directement la fonction .spip_select2()

Mais pas si vous appelez directement la méthode .select2() native.

sortAlpha

• {sortAlpha: true}
• ou data-sort-alpha="true".

Si cet attribut est présent, les options de sélection seront triées par ordre alphabétique. Cela est effectué en interne, en utilisant une fonction sorter ; En simplifiant cela pourrait ressembler à :

    jQuery('#select3a').spip_select2({sortAlpha: true});
    // est à peu près équivalent à :
    jQuery('#select3b').select2({
        /*'sorter': data => data.sort((a, b) => a.text.localeCompare(b.text))*/
        sorter: function(data) {
            return data.sort(function(a, b) {
                return a.text.localeCompare(b.text);
            })
        }
    });

highlightSearchTerm

• {highlightSearchTerm: true}
• ou data-highlight-search-term="true".

Cette option met en évidence le terme de recherche dans la liste des résultats, en appliquant un span .select2-rendered__match sur le terme recherché, qui est par défaut décoré avec un souligné.

Addition à la librairie javascript Select2

Le plugin propose une version altérée de Select2 javascript/select2.fork.full.js permettant des options supplémentaires impossibles à réaliser autrement.

onEnterSubmit

• {onEnterSubmit: true}
• ou data-on-enter-submit="true".

Appuyer la touche Entrée en ayant le focus sur le sélecteur fermé soumet le formulaire (comportement généralement présent sur les navigateurs). Par défaut, Select2 quand à lui ouvre le sélecteur.

Autocomplete Ajax

On peut indiquer une URL de recherche à Select2 afin qu’il obtienne la liste des choix en fonction de la recherche tapée par l’utilisateur. Un exemple est proposé dans le plugin, visible sur la page de test.

Par exemple :

<select class="select2" id="chiens" name="chiens[]" 
    data-placeholder="Quelle race de chien ?"
    data-ajax-url="[(#URL_API{select2_autocomplete/demo/dogs}|attribut_html)]"
    data-minimum-input-length="1"
>
</select>

L’API doit retourner un format spécifique (cf action/select2_autocomplete.php) pour fonctionner par défaut, mais du javascript supplémentaire peut servir pour adapter des apis déjà existantes. Cf. documentation Ajax de Select2.

onAjaxLoad ...

Attention avec l’autocomplete ; Si vous appelez directement .select2() (ce n’est pas le cas .spip_select2() utilisé par le plugin cependant), chaque requête ajax pour obtenir la liste des éléments recherchés va déclencher la fonction SPIP onAjaxLoad. Votre code ne doit pas redémarrer l’initialisation des select déjà gérés par Select2 dans ce cas (sinon vous verrez le sélecteur se refermer aussitôt !).

Remplacer le plugin Chosen

Ce plugin peut remplacer le plugin Chosen. Pour cela il faut soit déclarer la classe CSS .chosen dans la configuration du plugin Select2 pour qu’il s’applique dessus, soit appeler directement Select2 dans son propre code javascript, tel que :

jQuery('select.chosen').select2();
// ou
jQuery('select.chosen').spip_select2();

Il faudra également adapter les styles CSS spécifiques si vous en utilisiez, par exemple en fournissant css/select2_public.css (corollaire de css/chosen_public.css)