Веб-интерфейс: как представить большой список для множественного выбора

Question

Я ищу любые примеры, которые кто-либо мог видеть о том, как эффективно представить список элементов (всего около 1500), чтобы можно было выбрать несколько элементов.

Я видел пару похожих вопросов, где в ответе предлагается автозаполнение, которое работает для выбора одного элемента, но не учитывает, как разрешить пользователям выбирать несколько элементов.

Буду признателен за любые предложения или, особенно, ссылки на веб-приложения, которые могут иметь потенциальное решение!

Answer 1

Прошло много времени с тех пор, как это было опубликовано, но в то же время стали доступны несколько очень хороших вариантов выбора для ввода тегов или дота:

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

Это фантастическое решение для многих ситуаций - попробуйте!

Answer 2

Я думаю о том, как Google делает это с Gmail.

Во-первых, вы можете поставить флажки рядом с каждым элементом, который пользователь может выбрать индивидуально. Затем поместите фильтр / поле поиска, с возможностью выбрать / отменить выбор всего соответствия (добавить / вычесть из выбора). Вы также можете реализовать автозаполнение в текстовом поле.

Другие опции фильтрации (по тегу, по дате и т. Д.) Также хорошо подходят для этого метода. Это зависит от того, какие предметы вы пытаетесь перечислить.

Вы также можете упорядочить список в виде подсписков, если среди элементов есть некоторая общая группировка. Все еще с флажками, но вы можете расположить списки рядом друг с другом (заполнение дочерних элементов в следующем поле справа, когда пользователи выбирают родительский узел для просмотра). Или может подойти простое древовидное представление.

Answer 3

Извините за опоздание на пару лет ... И я надеюсь, что это кому-нибудь поможет, по крайней мере.

Я бы сказал, что используйте множественный выбор Эрика Хиндса или его большую версию. Хорошо, может быть, это не лучший интерфейс для 1500 предметов, но, возможно, это просто правильно. И это похоже на обработку в Google, за исключением того, что почти не поддерживает навигацию с помощью клавиатуры.

Он изменяет обычный SELECT MULTIPLE, раскрывающийся список HTML, с очень настраиваемым и интерактивным списком, который вы можете фильтровать (и в настоящее время) ИЛИ группировать с легкостью - в настоящее время фильтрация и группировка не работать вместе довольно хорошо.

При необходимости вы можете использовать этот мультиселектор и другое поле, отображающее все, что было выбрано. Вы можете даже просто настроить его (посмотрите на пример № 8) , чтобы сделать это так.

Answer 4

Я бы создал контейнер (DIV), который заполняется элементами, набирая текст в текстовом поле. Ввод текста в основном выполняет базовый фильтр по всем доступным элементам. Элементы будут отображаться внутри контейнера как выбираемые элементы, а выбранные элементы будут переноситься в отдельный контейнер (чтобы иметь возможность выполнять несколько поисков).

Answer 5

Я не могу вспомнить ни одного используемого веб-приложения, которое я использую, которое показывает мне 1500 вещей, из которых я должен выбирать.

Мое предложение состояло бы в том, чтобы как-то разбить список (например, как последовательность меньших вариантов, которые затем можно разрешить умножать на несколько). То, о чем вы спрашиваете, звучит как кошмар юзабилити.