2

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

Во-вторых, как сделать, чтобы при вводе буквы список прокручивался на элементы, начинающиеся на эту букву?

Также думал сделать, что если пользователь из списка не может найти слова, он вводит его вручную (менять SELECT на Input).

У кого какие мысли по юзабилити Select?

4 ответа 4

3

А использовать обычный input type="text" с параметром list="browsers", а ниже прописать datalist id="browsers" не прокатит? Мне кажется, как раз для такого случая.

7
  • 1
    Вот пример w3schools.com/tags/att_input_list.asp
    – Diefair
    14 окт 2014 в 14:44
  • Можете пример привести HTML?
    – Jony
    14 окт 2014 в 14:48
  • 1
    jsfiddle.net/diefair/3e96fqzj - поробуй ввести Safari.
    – Diefair
    14 окт 2014 в 14:51
  • Инпут никак не закрывается? И можно ли сделать один option как selected?
    – Jony
    14 окт 2014 в 15:00
  • 1
    Нет, input не имеет закрывающего тега.
    – Diefair
    14 окт 2014 в 15:04
1

вот вам http://jqueryui.com/autocomplete/

кроссбраузерное решение

4
  • Я как раз таки это и использую. Только вот нужен изначально полный выпадающий список, а лишь потом ввода слова.
    – Jony
    14 окт 2014 в 14:56
  • 1
    Смотри, если у тебя, к примеру, 10 записей, то я бы юзал обычный select и не парился - для легкости наыигации можно еще группы прикуртить к нему) autocomplete и вариант Diefair, по моему мнению, используют, когда реально выбор огромен и нужна быстрая навигация, и тут как бы само собой отпадает нужда вывода списка целиком - представь: у тебя 100 записей - их выводить списком-то не очень красиво ) ИМХО..
    – Ale_x
    14 окт 2014 в 15:05
  • Можно ли сделать в нем, чтобы по клику на input выводился весь список?
    – Jony
    14 окт 2014 в 15:06
  • jqueryui.com/autocomplete/#combobox
    – Ale_x
    14 окт 2014 в 15:13
0

Попробуйте chosen, заодно можно свой дизайн select'а сделать

0

Select 2 (ниже) или Chosen (ужа дал MasterAlex)

http://ivaynberg.github.io/select2/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.