Альтернативный вариант GUI для <select>, когда у вас много вариантов

A <select> может быть полезно для выбора между 3-15 простыми элементами, но как вы справляетесь с 15-100 +?

Самый простой вариант - просто иметь простой <select> с большим количеством <option> s, но он не очень удобен для пользователя. Там много прокрутки, и может быть трудно найти нужный вариант. Преимущество состоит в том, что вы можете (возможно, с прокруткой) увидеть все варианты, которые у вас есть.

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

Еще более сложным вариантом будет создание виджета "поиск, список и выбор", который по умолчанию показывает элементы X, но позволяет выполнять поиск. Преимущество этого подхода заключается в том, что я могу разрешить поиск по нескольким атрибутам, а не только по имени элемента, который должен быть выбран.

Какие решения вы развернули в эти ситуации?
Есть ли плагин jQuery, о котором я должен знать?

Ответ 1

Решение, которое мне нравится использовать, предоставляет пользователю список выбора со всеми параметрами (если они хотят просмотреть его), но предоставляет функцию автозаполнения, которая просматривает список по мере ввода в него. Сортировка вашего первого и второго вариантов.
Что касается плагинов, там есть номер (а также документация, которая приведет вас к большему количеству), которые могут вам помочь:

Ответ 2

Вы можете попробовать ненавязчивый выпадающий список быстрых фильтров (UFD) jQuery. Это, безусловно, мой любимый и очень хорошо работает в разных браузерах, даже ie6. Его можно легко стилизовать и, безусловно, быстро. Он может управлять тысячами элементов и быстрее, чем jQuery UI combobox autocomplete

Ответ 3

Вы должны взглянуть на Choosen http://harvesthq.github.io/chosen Это плагин jQuery, который генерирует более удобный выбор с текстовым полем для поиска. Это решение позволяет пользователю видеть все параметры и искать, в частности, без прокрутки.

Ответ 4

В jQuery есть Autocomplete plugin и есть Autocomplete в пользовательском интерфейсе jQuery.

Ответ 5

jQuery UI имеет элемент управления AutoComplete. Вы можете связать это вместе с функцией обратного вызова в качестве источника данных и использовать Ajax для загрузки больших наборов данных.

Ответ 6

Возможное решение, которое я видел в нескольких хороших текстовых реализациях, - это селектор рыбьего глаза, используемый в вертикальных списках. Есть много javascript/CSS, примеры Flash и Java в Интернете.

Ответ 7

Если параметры естественно образуют группы, вы можете использовать HTML optgroups вместо javascript-решения. Это делает большой набор опций более организованным и управляемым, сохраняя при этом все возможности.

Я не знаю, какой серверный язык/фреймворк вы используете для создания своего HTML-кода, но, например, в Ruby on Rails вы можете использовать grouped_options_for_select для автоматического создания групп opt.

Ответ 8

Мне нравится автозаполнение, когда есть много вариантов. Я нашел здесь пример jQuery здесь.

Ответ 9

Я попробовал следующее, как было предложено в приведенных выше ответах: plugins.jquery.com/project/jquery-select-autocomplete docs.jquery.com/Plugins/Autocomplete/autocomplete jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ Раскрывающаяся развертка с быстрым фильтром (UFD)

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

НО это все еще не давало мне согласованности между браузерами. Я хочу, чтобы он работал одинаково во всех браузерах. Например: В обычном элементе select, если я наберу первую букву, она приведет меня к первому варианту, начинающемуся с этой буквы, и если я затем нажму Enter, он выберет его, НО здесь он отличается от браузера браузером. Некоторые браузеры запускают событие onchange, когда "Enter" попадает, а некоторые не до тех пор, пока выпадающее меню не теряет фокус.

У UFD не было согласования "onchange", которое я искал