Xpoint
   [напомнить пароль]

Как реализовать выбор из большого списка?

Метки: [без меток]
2008-10-02 11:26:35 [обр] Ярослав Сюзёв (yara)(0/305)[досье]

Нужно реализовать выбор из большого (более 1000 эл-тов) списка, т. к. работать с таким чудовищем посредством обычного селекта-комбобокса крайне неудобно.

После размышления и просмотра материалов форума на ум приходят два варианта:

  1. Неактивированный (disabled) инпут, по клику на него рядом открывается панелька с табулированным списком. В панельке все "по-взрослому": разбивка на страницы, возможно поиск. При клике на строку таблицы выбранный эл-т попадает в инпут. Подобный вариант предлагался в Комбобокс, да не комбобокс, на самом деле.
  1. Все-таки селект-комбобокс, но с разбивкой по раскрашенным optgroup. Это взято отсюда: "Выбор станции метро" - удобный интерфейс?. Там и пример есть: http://beer.monitor.dp.ua/. Правда непонятно пока, как разбивать на группы: по темам (эл-ты могут быть категоризированы), по алфавиту? И, напоминаю, кол-во эл-тов более 1000.

Пока предпочтительным кажется первый вариант, с панелькой.

Что интересует:

  1. Еще идеи, мнения, варианты.
  1. Очень хочется посмотреть на уже реализованные предложенные решения, особенно на панельку. Ну или хотя-бы скриншоты.
  1. Все это нужно на обычном HTML.

С нетерпением жду помощи уважаемого сообщества.

спустя 41 минуту [обр] Ruscon[досье]
  1. Есть список, делаем поле, в котором можно писать запрос поиска. При вводе 2 букв и больше выводим асинхронно(просто JS поиск по уже сгенериному селектору или по БД) все совпадения выводим выпадающим списком. Пример тому гугл("быстрая" панелька поиска в гугле через FF или Opera) или тут глянуть http://av.ist.md/

Продолжение к 1)

  1. Если нужно выбрать несколько вариантов, то делаем второй, но уже мульти-селектор, в который JS-том заносим выбранные значения из огромного списка(селектора).

Работает при условии корректных названий пунктов. Имеется ввиду, что они несут смысловую нагрузку, а не имеют структуру "a_12_b_13".

спустя 1 час 7 минут [обр] Marat Tanalin(0/78)[досье]
Каков характер данных в списке? Можно, например, разбить список на осмысленные группы, по умолчанию свёрнутые (отображается только заголовок группы) и при разворачивании подгружающие свою часть списка.
спустя 2 часа 4 минуты [обр] Илья Cтpeльцын aka SelenIT(0/171)[досье]
Как вариант — двухуровневая структура: первый уровень — алфавит, второй — обычный выпадающий список значений на данную букву алфавита. Можно реализовать на голом HTML+CSS по тому же принципу, что выпадающее CSS-меню, а сами значения оформить как чекбоксы/радиобаттоны с соответствующим label.
спустя 19 часов [обр] Ярослав Сюзёв (yara)(0/305)[досье]
  1. Ajax-варианты

К сожалению, пока не рассматриваются.

  1. Группы, двухуровневая структура

Данные могут быть категоризированы. Но категории используются как фильтры при отборе, т. е. нигде в интерфейсе нет древовидного представления.

В общем мы с коллегой практически сошлись на панельке. Знаете, если кто видел 1С-Бухгалтерию, там так сделано.

Так вот, мне интересно, встречал ли кто-нибудь подобное интерфейсное решение в веб-сфере. Удобно ли им пользоваться? Очень хотелось бы, конечно, взглянуть...

З.Ы. Эх, чувствую, придется делать прототип и устраивать юзабилити-тестирование.

спустя 1 час 49 минут [обр] Александр Галкин(0/211)[досье]

Работать с селектом крайне удобно, если приделать к нему поиск. Пример вот здесь, второй сверху (под заголовком «Unobtrusive»).

Для визуального выбора (когда заранее неизвестно, как называется нужный вариант), наверное, удобнее большая панель с категориями, но возможность просто написать три буквы, ничего не открывая — бесценна.

спустя 36 минут [обр] Ruscon[досье]
Александр Галкин[досье]
Я это уже предлагал =)
спустя 55 секунд [обр] Ruscon[досье]
Кроме того, имхо, не стоит подключать тяжёлый экст для не очень тяжёлых задач.
спустя 21 день [обр] Ярослав Сюзёв (yara)(0/305)[досье]
В общем, делаем панельку. Всем спасибо.
спустя 2 месяца 27 дней [обр] Алексей Волков, он же «Росомаха из Флориды»(17/468)[досье]
Ярослав, а если не жалко, может, покажете, что у вас получилось в итоге?
Посмотреть на получившийся макет интерфейса всегда полезнее, чем просто обсуждать его на словах, всё же. Ну, и хочется тему закрыть на какой-то конструктивной ноте, с результатами. :)
спустя 7 часов [обр] Ярослав Сюзёв (yara)(0/305)[досье]
Да, покажу. В течение одного-двух дней сделаю скриншоты и выложу. Попользоваться, к сожалению, дать не могу, т. к. это административный интерфейс. И тему можно закрывать, да.
спустя 1 день 3 часа [обр] Ярослав Сюзёв (yara)(0/305)[досье]

Вот скриншот работающего интерфейса. На переднем плане панелька. Из нее выбирается элемент в поле Новость формы на заднем плане.

Последнее наше изобретение — поле Выбранный элемент в панельке (самый верхний инпут). Все остальные контролы там служат для фильтрации каталога.

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

спустя 5 дней [обр] Михаил Кюршин aka ya-ya(2/414)[досье]

Я делал похожий выбор, только в WEB-интерфейсе. Плюс есть отличие, окно выбора у меня модальное: пока оно активно, основная форма недоступна.

Реализовано так: у поля ввода, для которого нужно использовать список, находится кнопка "выбор из списка". Само поле неактивно для ввода. Ему соответствует hidden поле, в которое при выборе попадает ID элемента из списка. В само поле при выборе попадает название элемента.

При нажатии на кнопку "Выбор из списка" появляется полупрозрачный серый слой 100на100% (так затеняется основная форма) и поверх него слой с iframe (высота 50% ширина 100%, прижат вниз экрана, так что половина основной формы видна за серой подложкой). В этот iframe грузится список с постраничным выводом и фильтрами. При нажатии Esc или клике вне Iframe (по полупрозрачной подложке) он закрывается и "активируется" основная форма. При клике внутри iframe по элементу списка (строка в таблице, подсвечивается при hover) Iframe так же закрывается, и в основной форме заполняется в отображаемый input название выбранного элемента, а в hidden его ID.

Приложил бы скриншоты, чтобы не объяснять так подробно, но нельзя, конфеденциальность и всё такое

спустя 15 часов [обр] Ярослав Сюзёв (yara)(0/305)[досье]
Да, Михаил[досье], у меня ведь веб-интерфейс как раз и есть. От модальности мы пока решили отказаться. В остальном логика работы элемента получилась примерно такой же, как у вас. Спасибо за ответ!
спустя 1 месяц [обр] Алексей Волков, он же «Росомаха из Флориды»(17/468)[досье]
Ярослав, а почему отказались от модальности? Мишин вариант с лайтбокс-моделью (затемнение фона с формой, выбор объекта из базы, возвращение к форме) мне кажется логичнее с точки зрения последовательности действий (и не требует новых окон, что всегда лучше, так как меньше отвлекает пользователя).
спустя 2 часа 48 минут [обр] Ярослав Сюзёв (yara)(0/305)[досье]
Алексей Волков, он же «Росомаха из Флориды»[досье]
Вариант Михаила мне понравился. Но сначала нам показалось сложным реализовать модальность. Возможно позднее мы с коллегой еще вернемся к этому вопросу...
Powered by POEM™ Engine Copyright © 2002-2005