Améliorer les select multiple

Utilisation de librairie Chosen pour améliorer l'expérience utilisateur du select multiple et intégration dans le BsFormHelper.

Introduction

Si comme nous, vous avez déjà eu à mettre en place un formulaire disposant d'un select multiple, vous savez que l'expérience utilisateur associée n'est pas optimale : mauvaise visibilité des choix possibles, système de sélection multiple compliqué avec Ctrl ou Maj, etc.

Plusieurs solutions existaient déjà, et notamment dans CakePHP, pour améliorer tout ça, comme transformer la liste en une série de checkbox par exemple ou utiliser une librairie JS pour "transformer" le select multipe en des éléments différents. Après plusieurs essais, nous avons décidé de nous arrêter sur la librairie Chosen. Ci-dessous son rendu en image. Nous sommes parti sur un exemple classique d'association de tag à un article (technique web) :

Exemple select multiple
Exemple d'un select multiple classique



Exemple select multiple avec chosen
Exemple d'un select multiple avec Chosen


Les image ne le montrent pas forcément, mais Chosen permet de s'affranchir efficacement de l'utilisation des touches Ctrl/Maj/Cmd tout en proposant une expérience utilisateur agréable. Nous allons maintenant regarder comment l'utiliser dans un projet CakePHP.


Utilisation dans CakePHP

Remarque : Il faut être en possession de la dernière version de notre Plugin BsHelpers pour CakePHP pour faire fonctionner le code ci-dessous.


// On crée la liste des options possibles (éventuellement créé avec un find('list')
$choixTechnologies = array(1 => 'HTML',2 => 'CSS',3 => 'PHP',4 => 'Javascript',5 => 'SQL',6 => 'C', 7 => 'C++',8 => 'C#');

// On crée ensuite le formulaire à l'aide du BsFormHelper
echo $this->BsForm->create('Article', array('action' => 'add')).
     $this->BsForm->input('Article.titre', array('value' => 'Mon article qui parle du web')).
     $this->BsForm->chosen('Article.technologie', $choixTechnologies, array('multiple' => true, 'label' => 'Technologie')).
     $this->BsForm->submit('Ajouter', array('class' => 'btn btn-success')).
     $this->BsForm->end();

On a donc juste utilisé la nouvelle fonction chosen qui s'utilise d'une façon similaire à la fonction select.

Nouveauté dans le BsHelper, vous n'avez pas besoin de vous soucier de gérer l'appel au javascript associé à chosen. Le BsHelper le charge pour vous seulement si vous appelez sa fonction. Tous les détails ici.


Options possibles

Toutes les options de chosen peuvent être utilisées via le BsFormHelper. La liste est disponible sur leur site : options de Chosen.

Ci-dessous un exemple plus poussé avec notamment des groupes pour les choix possibles et quelques options sélectionnées :


$choixTechnologies = array(
        'Sites Web' => array(
            1 => 'HTML',2 => 'CSS',3 => 'PHP',4 => 'Javascript', 5 => 'MySQL'),
        'Applications et programmes' => array(
            6 => 'C', 7 => 'C++', 8 => 'C#')
        );

echo $this->BsForm->create('Article').
     $this->BsForm->input('Article.titre', array('value' => 'Mon article qui parle du web')).
     $this->BsForm->chosen('Article.technologie', $choixTechnologies, 
     array(
        'label' => 'Technologie', 
        'multiple' => true,
        'disabled' => array(5), // On désactive un des choix possibles
        ),
     array(
        'data-placeholder' => 'Choisissez 2 technologies', // Placeholder
        'max_selected_options' => 2 // Options maximum sélectionnables
        )
     ).
     $this->BsForm->submit('Ajouter', array('class' => 'btn btn-success')).
     $this->BsForm->end();

Et le rendu correspondant :

Exemple select multiple avec chosen 2
Exemple d'un select multiple avec Chosen et quelques options




Conclusion

Nous avons vu dans cet article comment améliorer l'expérience utilisateur pour la saisie d'un select multiple. Il faut savoir que Chosen peut être utilisé également avec des select "simples", non-multiple. Il permettra même d'autres fonctionnalités comme profiter d'un champ de recherche et de l'autocomplétion.

N'hésitez pas à faire quelques essais des différentes options et pourquoi pas à nous proposer vos meilleures utilisations dans la zone de commentaires ci-dessous.

Les liens importants :