web ui: Comment présenter une grande liste pour multi-select

Question

Je cherche des exemples que quelqu'un aurait pu voir sur la façon de présenter efficacement une liste d'éléments (environ 1500 au total) de sorte que plusieurs éléments peuvent être sélectionnés.

J'ai vu une question similaire où la réponse suggère une auto-complétion, qui fonctionne pour sélectionner un seul élément, mais qui ne traite pas de la façon de permettre aux utilisateurs de sélectionner plusieurs éléments.

Toutes les suggestions, ou particulièrement les pointeurs vers des applications web qui pourraient avoir une solution potentielle, seraient très appréciées!

Answer 1

Je ne peux pas penser à utilisable application web que j'utilise qui me montre 1500 choses que je dois choisir. Ma suggestion serait de faire tomber la liste d'une façon ou d'une autre (par exemple, comme une séquence de choix plus petits, que vous pouvez ensuite autoriser des multiples). Ce que vous demandez à propos de ressemble à un cauchemar d'utilisabilité.

Answer 2

Je créer un conteneur (DIV) qui est rempli d'éléments en tapant du texte dans une entrée de texte. La saisie de texte effectue essentiellement un filtre de base sur tous les éléments disponibles. Les éléments apparaîtraient à l'intérieur du conteneur en tant qu'éléments sélectionnables, et les éléments sélectionnés seraient transférés dans un conteneur séparé (afin de pouvoir effectuer plusieurs recherches).

Answer 3

Je pense à la façon dont Google fonctionne avec Gmail. Tout d'abord, vous pouvez mettre des cases à cocher à côté de chaque élément que l'utilisateur peut sélectionner individuellement. Ensuite, mettre un filtre/boîte de recherche, avec l'option de sélectionner/désélectionner tout correspondant (ajouter/soustraire de la sélection). Vous pouvez également implémenter la saisie semi-automatique dans la zone de texte.

D'autres options de filtrage (par étiquette, par date, etc.) se prêtent bien à cette méthode. Cela dépend du type d'éléments que vous essayez d'énumérer.

Vous pouvez également organiser la liste dans un ensemble de sous-listes, s'il existe un regroupement commun parmi les éléments. Toujours avec les cases à cocher, mais vous pouvez organiser les zones de liste les unes à côté des autres (en remplissant les enfants dans la case suivante à droite lorsque les utilisateurs sélectionnent un noeud parent à afficher). Ou un simple treeview pourrait faire.

Answer 4

Désolé d'avoir quelques années de retard ... Et j'espère que cela aide quelqu'un au moins.

Je dirais soit utiliser Eric Hynds's multiselect ou une version plus grande de celui-ci. Ok, peut-être que ce n'est pas la meilleure interface pour 1500 éléments, mais peut-être que c'est juste. Et c'est un peu similaire à la gestion de google, sauf qu'il n'a presque aucun support pour la navigation au clavier.

Il modifie la MULTIPLE régulière SELECT, la boîte de transfert HTML, avec une liste très personnalisable et cliquable que vous pouvez filtrer (et actuellement) groupe OU avec facilité - à ce moment, le filtre et le regroupement ne fonctionne pas ensemble tout à fait bien.

Si nécessaire, vous pouvez utiliser ce multiselect et une autre boîte affichant tout ce qui a été sélectionné. Vous pouvez même just tweak it (look at example #8) pour le faire.

Answer 5

Il a été un moment que cela a été affiché, mais en attendant quelques très bonnes options de style multi-select « entrée tag » ou « casemate » sont devenus disponibles:

https://harvesthq.github.io/chosen/

C'est un fantastique solution pour de nombreuses situations - essayez-le!