alizar 25 июл 2011 в 19:36

Chosen: сделай выпадающие списки более дружественными

1 мин

54K

JavaScript*

+236

Комментарии 57

Radik_Wind 25 июл 2011 в 19:45

Однозначно в закладки. Спасибо!

+10

ArtemSmirnov 25 июл 2011 в 19:51

Не поймите меня не правильно, но получается что теперь на хабре деляться плагинами для jQuery вместо того чтобы писать технические статьи, или «программистов» на jqeury нынче так много что выкладывать плагины популярно?

Rihtor 25 июл 2011 в 23:56

Тем более на мобильных устройствах этим пользоваться невозможно! Ни iPhone, ни iPad, и, думаю андроид, так как там тоже webkit, не могут листать эти списки. Короче говоря не используйте что-то просто ради того что бы использовать!

l2k 26 июл 2011 в 03:58

коммент ниже

mreugene 26 июл 2011 в 11:09

Специально проверил на планшете (дроид 3.1) — все работает.

Rihtor 27 июл 2011 в 11:45

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

l2k 26 июл 2011 в 03:57

Но самое страшное и важное, чего не хватает в таких select плугинах — это управления с клавиатуры!

o_0 26 июл 2011 в 04:18

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

yopopt 25 июл 2011 в 19:53

В демо я вижу как и стандартных контролах один недостаток. Нет возможности очистить поле не добавляя пункт «не выбрано».

alexsrdk 25 июл 2011 в 21:01

А мне обычно не хватает возможностей input-select.
Вот что придумалось, глядя на демо:

SowingSadness 25 июл 2011 в 21:24

Попробуйте это:
в демо 3 элемент сверху

буду рад всякому фидбеку

alexsrdk 25 июл 2011 в 21:46

В этом и есть суть input-select'a, но не совсем очевидно добавление нового элемента (по крайней мере для меня). Ну и мультиселект отпадает в такой реализации.

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

serf 25 июл 2011 в 21:51

Реализовал демку, с кнопкой «Добавить». В jQuery версии невозможно добраться до основного класса Chosen, надо патчить либу, в Prototype версии класс лежит в window — проблем с расширением нет.
скрин habrastorage.org/storage1/1323aad6/a9f967f1/3c634b64/f03c19a8.jpg

serf 25 июл 2011 в 21:59

если нужно могу небольшой пост сделать, с исходниками

rma4ok 25 июл 2011 в 23:48

Пожалуйста. Лишним не будет

serf 25 июл 2011 в 23:54

Статья готова, карма не позволяет публиковать (

serf 26 июл 2011 в 11:01

Благодарю всех за поддержку, еще немного осталось и смогу публиковать

serf 26 июл 2011 в 16:07

Статья опубликована

Claud 25 июл 2011 в 20:24

Multiple Select не удобный. Нельзя открыть список и выбрать сразу несколько элементов (по Ctrl).

alexsrdk 25 июл 2011 в 20:47

Замечание очень ценное!
Но это ведь не проблема. При желании не так сложно «допилить» и Ctrl, и даже Shift, если пригодится.

MarcusAurelius 25 июл 2011 в 20:44

Контрол нужный, гораздо лучше чем аналогичный Autocomplete из jQuery UI, а вот есть ли возможность в нем не весь список сразу задавать, а подгружать через JSON с сервера? Без нее смысла нет в контроле мало, а в демках нет, может кто изучил вопрос?

negodnik 25 июл 2011 в 20:51

А топик-то в блоге AJAX. Ай-нанэ.

MarcusAurelius 25 июл 2011 в 21:03

Че он делает в «AJAX» я тоже не понял, скачал исходники, ни намека на AJAX нет, хотя JSON для подгрузки вариантов экономнее был бы.

negodnik 25 июл 2011 в 21:06

Согласен, особенно со странами.

А вообще это прикольно, люди часто путают AJAX и jQuery: «ну сделать сворачивание, чтобы по ссылке таблица появлялась, ну на этом, как его, на аяксе! как, вы что не знаете аякса?»

alexsrdk 25 июл 2011 в 21:15

Сначала тоже удивился почему тут Ajax не используется.
Но все встает на свои места^* если еще раз посмотреть на назначение данного плагина — ненавязчивая замена стандартных выпадающих списков.

^* Кроме выбранного блога конечно.

negodnik 25 июл 2011 в 20:45

«Меню»?

НЛО прилетело и опубликовало эту надпись здесь

Valachi 25 июл 2011 в 21:26

Надо бы доработать чуток =)

Stepler 25 июл 2011 в 21:30

Интересно, а автопоиск строки происходит адекватно, если данные на кирилице? Автор статьи или кто-нить тестировал уже этот вопрос?

xaker1 26 июл 2011 в 00:29

Вполне адекватно.

utk 25 июл 2011 в 21:43

Очень удачная реализация с токи зрения удобства интерфейса. Спасибо!

НЛО прилетело и опубликовало эту надпись здесь

CKOPOBAPKuH 25 июл 2011 в 21:52

первый полезный пост ализара, ну надо же. ПОЗДРАВЛЯЮ ВАС, АЛИЗАР! ТЕПЕРЬ И ВЫ ПРИНОСИТЕ ПОЛЬЗУ ОБЩЕСТВУ!

-10

zhylin 26 июл 2011 в 13:14

Чего вы так? У Ализара есть хорошие посты, те же переводы, например.

CKOPOBAPKuH 26 июл 2011 в 15:16

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

НЛО прилетело и опубликовало эту надпись здесь

Evengard 25 июл 2011 в 23:12

Проскакивал на хабре обзор на эту тему — кстати вот он — habrahabr.ru/company/aiken/blog/114927/
По-моему этот лучший. Спасибо человеку!

НЛО прилетело и опубликовало эту надпись здесь

Mixailo 25 июл 2011 в 23:36

Столкнулся тут недавно с плагином, который рисует красивые checkbox-ы… Что бы вы думали? Он не перерисовывает их, когда им присваивается значение checked!

dreamhelg 26 июл 2011 в 13:17

что за плагин, если не секрет?

dfuse 25 июл 2011 в 23:36

А его можно развернуть и держать в развернутом состоянии? Несколько пунктов подряд чтобы выбрать больно много кликов надо.

VasilioRuzanni 26 июл 2011 в 00:09

Очень клевая штука. Но несколько странно использование атрибута title для текста по-умолчанию. Я бы заюзал placeholder, или если его нет у элемента select (лень проверять), то data-placeholder.

z6Dabrata 26 июл 2011 в 00:40

Отлично,
Page up / Page Down не обрабатывает в списке

powerman 26 июл 2011 в 02:08

All modern browsers are support (Firefox, Chrome, Safari and IE9).

А что, Opera уже не modern browser?

Davert 26 июл 2011 в 13:35

Вот непонятно, что там такого используется, что Опера не поддерживает.

ArtRoman 26 июл 2011 в 15:41

Всё вроде работает как надо. Обидно, что Оперу не считают современным браузером.

hazg 26 июл 2011 в 02:41

спасиб

Wott 26 июл 2011 в 05:05

В опере клавиши глючат слегка, а так прикольно.

cream_brule 26 июл 2011 в 09:23

супер, это реально красивая штука и очень удобная

НЛО прилетело и опубликовало эту надпись здесь

sas1024 26 июл 2011 в 11:04

Отличная реализация! Единственное чего не хватает для полного счастья — различные Event'ы. Мне вот например очень нужно событие hover, чтобы при наведении курсора мышки на элемент выпадающего меню где-то рядом я мог бы отобразить подсказку по этому элементу меню.