Мультиселект

Вот сталкнулся с такой задачкой по дизайну. нужен мультиселект.
в ID1 много элементов например тыща разных характеристик объекта.
в ID2 характеристики конкретного объекта

Курск

нужно дать юзеру «юзабильно» заполнить хар-ки конкретного объекта выбрав их из общего списка или добавить свою новую характеристику.
хотелось бы посмотреть предложения оптимальные. ну и собственно есть свое попозже выложу как сейчас это работает

52 комментария

  • аватар SeL
  • 0
Я могу привести аналоги из десктопных приложений.
Чесно говоря я не уверен что до конца правильно понял задумку, но судя по всему имелось ввиду примерно следущее:
Курск
В таком случае нужно еще в предложенном в топике варианте предусмотреть стрелку «ремув», а также при перемещении строк из одного списка в другой, удалять перемещеный айтем из источника, чтобы его нельзя было перенести еще раз и он не мешал выбирать другие. Ну и как то предусмотреть добавление новых айтемов.

Но мне такое не очень нравится, я бы предпочел просто открытие диалога с мультиселекткомбобоксом, отбирающим фокус у основного окна. В котором общим списком показаны все возможные варианты, но выбранные отмечены галочкой.
Который выглядел бы примерно так (кусок интерфейса гмыла):
Курск
А внизу диалога добавить кнопку, открывающую еще один диалог забирающий фокус на себя с полем для ввода нового айтема, в случае если нужно добавить новую характеристику.
Ну а в основном окне выводится только список выбранных айтемов и кнопка открывающая диалог их редактирования.
а если он введет новую характеристику а на самом деле она уже есть в базе? ии там есть «кондиционер» а он введет «кондер» т.е. например синоним или ошибеца в орфографии. а это потом будут кретериями поиска. т.е. тут нужно придумать решение с полем фильтрации
  • аватар SeL
  • 0
Ну если он введет характеристику, а она есть в базе, то просто можно сообщить ему об этом.
А вот если все кому не лень могут редактировать список айтемов, то может понадобиться работа модератора.
Но можно сделать в базе словать синонимов или автозамен, чтобы упростить и ускорить работу модераторов.
Самый примитивный вариант: пусть у нас есть таблица в БД в ней только id и название характеристики. Добавим к ней еще одну колонку link ссылка, по умолчанию равную NULL. Предполагаем что все id у нас больше 0.
Для примера пусть у нас будет такая таблица с данными:

 id |      name    |link
  1 |  кондиционер | 0
  2 |       кондей | 1
  3 |    телевизор | 0
  4 |       кондер | 1
  5 |        телек | 3
  6 |     кондишен | 1
  7 |       плазма | 3
  8 | сплитсистема | NULL
  9 |           TV | NULL
0 означают категории и слово для замены в списке функций при выборе выводятся только они (выборка WHERE link=0).
цифры означают id на какой надо заменять данную характеристику, например пользователь вбил «телек» до одобрения модератором категории «телевизор», но после создания этой категории и отнесения в нее «телек» в выдаче нужно будет выводить «телевизор» вместо «телека».
Причем если пользователь еще раз попытается добавить «телек», то посоветовать ему выбрать категорию «телевизор»
Там где стоит NULL — это категории добавлены после последнего визита модератора. Модератор заходит, ему выводятся вновь добавленные категории (выборка WHERE link=NULL) он приписывает им замену уже существующим категориям, таким образом сплитсистеме запишется 1, а ТВ — 3.
Если пользователь при добавлении характеристики вбил уже существующую, то ему надо предложить выбрать название уже существующей.

Ну и естественно понадобится интерфес управления всеми этими категориями для модератора, закрытый от пользователя. Там удалить, перенести, заменить.
и нужно чтоб было сразу навиду что мы выбрали уже
  • аватар SeL
  • 0
А много вообще предполагается таких функций?
их может быть несколько сотен общий список. зачем юзеру выдавать сообщение что элемент уже есть? можно просто его молча перенести в его список. типа сам добавил.
  • аватар SeL
  • 0
Может и можно, а можно просто прокрутить список к этой строке.
а как человеку наглядно увидеть что у него выбрано? т.е. ему например нуджно отредактировать профиль объекта, он заходит и видит ага у меня тут еще появилась посудомоичная машина но полетел телевизор. и ему нужен список сразу что у него там уже стоит
  • аватар SeL
  • 0
Ну изначально у него отображается список того что отмечено:
Характеристики:        [редактировать]
---------------
телевизор 
кондиционер
шторы
холодильник
ПВХ окна
лоджия
душевая кабина
ковер 

Ну вверху типа название и кнопка редактировать или рисунок с шестеренкой и ключом
Так мы видим что уже есть и не отвлекаемся на остальное
Но ходим добавить чтонибудь нажимаем на редактировать получаем диалог поверх окна:
Список характеристик:      [дополнить]
---------------------
[x] телевизор 
[ ] шкаф
[x] кондиционер
[x] шторы
[ ] посудомоечная машина
[ ] паркет
[x] холодильник
[x] ПВХ окна
[x] лоджия
[ ] домофон
[ ] интернет
[x] душевая кабина
[x] ковер
[ ] тамбур
... прокрутка дальше
[Save]  [Don't save]
Нажмем кнопку дополнить, получим диалог с добавлением новой характеристики:
Добавить новую характеристику
введите название: ________________
[Ок]   [Cancel]
Написали название, нажали «ОК», если такое название (или категория-синоним как я уже писал выше) уже есть, то вернуться к предыдущему диалогу перейти к этому полю и допустим выделить его цветом, иначе добавить новую характеристику и тоже перейти к ней, выделив ее цветом — пользователь еще раз подумает отмечать ему ее или нет.
неплохой скроллбар получица если несколько сотен элементов. и не много ли окон поверх, и лишних кликов
  • аватар SeL
  • 0
так в том варианте что в топике будет тот же самый скроллбар
чтобы упростить поиск можно добавить автодополнение, только учитывать не только названия, но и синонимы
что-то типа
  • аватар SeL
  • 0
Правда можно уменьшить число кликов, сделав возмжность удалять выбранные характеристика прямо их главного списка, поставив рядом маленькие кнопочки удалить.
  • аватар SeL
  • 0
Точнее характеристик, если их больше 7-10, то все равно придется делать вертикальную прокрутку. Ну а так мы видим сразу все выбранные, а если надо добавить или удалить открываем диалог с мультиселект комбобоксом, а там уже выбранные отмечены галочками, остальные нет, но их можно отметить или убрать отметки, нажать «Ок» и вернуться к списку, в котором обновится информация о выбранных характеристиках. Не претендую на истинность, но мне такой вариант ближе.
  • аватар tau
  • 0
Сейчас рисую вариант
я в конечном итоге пришел к такому интерфейсу как мне кажется наиболее понятному варианту.
Курск
все в один клик делается.
Раньше скрывал Add New и только если фильтр ничего не выдавал — показывал его.
Но решил всегда показывать для удобства.
Если мы добавляем новый пункт который уже есть в списке справа то лишь справа от [+] на секунду вылезет серенький текст типа добавили из списка. и справа пункт исчезнет. фильтр делает выборку при чем по сочетанию букв в любой части слова а не автокомплит
  • аватар tau
  • 0
я сейчас допиливаю свой вариант он однозначно проще.
  • аватар tau
  • 0
дизайн интерфейса
  • аватар tau
  • 0
если есть ситуация когда надо добавить все, то слева под списком элементов можно добавить «Добавить все».
я так изначально делал но!
почему я решил отказаться от одного поля фильтр/добавить.
например в базе характеристик есть washerdish а нужно добавить washer
а в остальном у меня логика 1 в 1.

Слева это как бы наша основная база характеристик а справа база текущего объекта
соответственно добавлять в основную ничего нельзя. добавлять он должен в свою и только после сохранения она перейдет в основную, так я посчитал будет логичней. а удалять позиции можно из текущей соответственно если он удаляет ту которая есть в оснавной то она возвращается назад, а ту которую он добавил и удалил значит она нахер не нужна и идет в жопу
  • аватар SeL
  • 0
ту которую он добавил и удалил значит она нахер не нужна и идет в жопу
А если он по ошибке ее удалил? Набирать заново?
  • аватар SeL
  • 0
Еще хотел спросить, а пользоваться этим контролом должны будут одни и те же люди, допустим только агенты по недвижимости, или аудитория широкая?
Просто если этим надо будет воспользвоваться всего 1-2 раза, то некоторые пользователи смогут не осилить (((
не. этим будут постоянно пользываца менеджеры заполняя инфу про хаты. а они не особо смекалистый народец им вот этот плюсик в конце поля в котором они ищут нужное удобство. я тоже сначала думал одним полем обойтись, но одно дело мы избалованные веб 2 нолем а другое они которые всю жизнь все записывали в огромные тетради, на крайний случай в экселе таблицы делали
  • аватар tau
  • 0
предлагаю добавить плюсик при любом наборе. но убирать его если ничего не набрано или такой элемент уже есть, чтобы не добавить дважды.
ну вот а если я случайно нажму на крестик слева, как мне восстановить список?
  • аватар tau
  • 0
Сразу не будет ничего удаляться. Элемент останется и какое-то время кго можно будет вернуть. Нарисую на днях. Сейчас поздно а завтра смогу только весером, но еще не факт
  • аватар ololo
  • 0
В начале 2000-х была придумана такая штука, как osCommerce. Некоторые извращенцы пользуются этим недоразумением до сих пор. Там тоже есть «база характеристик». По всему видно, что ни ты, ни Артём ещё не сталкивались с подобными задачами и потому сосредоточились на том, как сделать удобным неудобное вместо того, чтобы устранить саму причину неудобства.
  • аватар tau
  • 0
Задача была сформулирована именно так.
Возможно, если бы рассказали суть, мы бы пидумали решение, как обойтись без этого модуля. Пока контекст неизвестен.
  • аватар ololo
  • 0
Я не понимаю, о каком модуле идёт речь, но здесь налицо серьёзная проектная ошибка, которая видна вне зависимости условий задачи.
какая ошибка? система продается конторе они сами себе в ней цари, пусть сами организовывают, мы даем как можно больше свободы и удобства все
  • аватар ololo
  • 0
Настоящую свободу дают те самые конструкторы, о которых я уже несколько раз упоминал, но о которых здесь, похоже, кроме меня никто не слышал. Ошибка же заключается в том, что твоя универсальность со временем обернётся хаосом в «библиотеке характеристик», если клиенту важны строгие однозначные вхождения. Это медвежья услуга, которая потом по вам же и ударит, когда через пару лет заказчик обратится с просьбами придумать, как навести порядок.

Если же строгие вхождения не важны, то неясно, почему нельзя выбросить эти громоздкие «мультиселекты» и использовать простое текстовое поле для свободного описания либо что-то вроде меток с автокомплитом и группировкой родственных меток в результатах поиска для коррекции разночтений. Для обеих ситуаций разрабатываемое решение лично мне представляется нерациональной полумерой, извини уж за занудство и субъективизм.

Упомянутый вариант с метками используется в обновлённой версии этого сайта для формирования собственной навигации по сайту, индивидуальной для каждого пользователя. В апреле, надеюсь, дойдут руки до обновления и можно будет посмотреть живой пример реализации. Что-то похожее используется на dirty, но там нет группировки и персонализации.
  • аватар ololo
  • 0
Здесь логично использовать популярный в современных фреймворках паттерн CCK. Работа с большой библиотекой свойств объекта всегда сопряжена с трудностями, от которых легко избавиться, введя профили свойств, которые зависят от номенклатурной группы.

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

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

Курск
  • аватар ololo
  • 0
Если есть возможность организовать качественную постмодерацию, значит есть ресурсы и для правильного профилирования всех возможных объектов недвижимости. Грамотное проектирование позволит свести к минимуму необходимость введения новых свойств. В твоём конкретном случае это может быть реализовано так: администратор сайта составляет список типичных профилей объектов (дом, офис, квартира и т. д.) и создаёт для них наборы из предварительно созданных свойств.

Менеджер, добавляя объект, выбирает номенклатурную группу (профиль, категорию — как угодно можно называть), после чего ему показывают список возможных свойств, которые могут принадлежать объекту только из определённой группы, не показывая лишнего. Далее, у тебя форма добавления реализована в виде модального окна, что является серьёзной проектной ошибкой. Не вдаваясь в истинное предназначение модальных окон и прочую теорию, можно легко заметить, что искусственное ограничение пространства не выглядит уместным там, где предполагается скролл и большое количество элементов, которые потребуется выбирать. Очевидно, что диалогу редактирования свойств объекта нужно отдать весь экран.

Насколько я понял, пустое поле в центре — это место для перетаскивания свойств (надеюсь, ты используешь очевидный в этом случае drag-n-drop?). На мой взгляд, источник (библиотеку свойств) и цель нужно поменять местами, привычное направление чтения для европейца — слева направо. Группу свойств, которая стоит слева, лучше вынести в другое место, например поставить над интерфейсом добавления свойств.

И ещё поправочка — это не мультиселект, в мультиселекте видны сразу все возможные варианты для выбора, сам выбор осуществляется прямо в списке без внешнего контекста, как у тебя и содержимое мультиселекта редактировать нельзя. Вероятно, ты использовал jquery плагин с одноимённым названием, но истрически мультиселектом всегда называли вот это
<select size="10" name="selecteds[]" multiple="multiple">
<option>значение 1</option>
<option>значение 2</option>
<option>значение 3</option>
</select>
нене это не модальное окно добавления это вкладка целая
Курск

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

Тут кстати целых 2 мультиселекта ) вот второй
но это уже от jQuery UI
Курск
  • аватар ololo
  • 0
По крайней мере на скрине выше выглядело как модальное окно. А что насчёт CCK? Не вижу смысла тебе плодить сущности а потом разгребать весь накопленный геморрой. Конечно, решение с «базой характеристик» самое простое и тут маячит соблазн пойти по пути наименьшего сопротивления, но я бы рекомендовал изначально сделать так, чтобы в дальнейшем не возникало проблем при поддержке продукта.
  • аватар ololo
  • 0
Кстати, если это отдельная страница, то зачем список зажимать в узкие рамки скролла? Пусть он будет весь показан на странице, которая и будет скроллиться, если надо.
там их может быть сотни позиций может быть, не думаю что кто то будет искать глазами
  • аватар ololo
  • 0
У одной категории недвижимости не может быть несколько сотен признаков, это уже больше похоже на свободное описание, которому можно просто отвести текстовое поле и проинструктировать менеджеров, как его заполнять. Либо ты недостаточно полно осветил задачу и я её неправильно понимаю.
  • аватар tau
  • 0
Объяснение задачи ускорило бы появление решения
дак это реальная задача. создать элемент управления чтоб удобно заполнять «удобства жилища» выбирая из из множества или создавая новые.
  • аватар tau
  • 0
Создаватьь новые во время поиска? Зачем?
Или при публикации объявления?
нене на этой карте мы только ищем и делаем выборку из забитых в систему объектов. тут же нет поля создать
  • аватар ololo
  • 0
Тогда тебя прямая дорога к конструкторам контента. Разумеется, если рассматривать задачу не с теоретических, а с практических позиций. Если для вашей платформы недоступен такой конструктор (желательно с развитым профилированием), то будет размно выбрать другую либо написать его самостоятельно (занятие для сильных духом).
  • аватар tau
  • 0
Вот на этом этапе я бы не давал возможности выбирать что-то из правого списка.
Т.е. Когда квартиры уже найдены и их много, надо сужать выдачу с помощью фильтра. Возможно сужение и не потребуется. Причем человеку часто важен один-два параметра (например наличие телевизора и джакузи) и уж точно не десятки.
это еще ниче не найдено это расширеный поиск
Хули пиздеть, сделайте работающие прототипы и пусть народ оценит.
  • аватар ololo
  • +1
Отлично, добавь ещё для большей наглядность .ui-sortable li{cursor:move}
Ждём вариант tau
  • аватар tau
  • 0
Мне некогда пока развлекаться, увы.
Жаль, кто-нибудь готов реализовать тёмин вариант?
  • аватар ololo
  • 0
я честно говоря не понял, в чём принципиальная разница кроме отсутствия лишнего поля ввода?

Чтобы оставлять комментарии, нужно или зарегистрироваться.