Comments 71
Сделано аккуратненько, молодцы!
Про баг
А откуда там вообще double-click взялся?
0
Дело там не в дабл клике, хотя он, наверное, может помочь. Нужно выбирать обычным кликом)
+1
Смог воспроизвести баг. Но как он к программистам/не-программистам относится я не понял.
+3
Это эмпирический вывод
Суть бага в том, чтобы сделать клик менее чем за 100 мс. Получается, что у людей с богатым опытом использования компьютера (профессиональным, игровым) скорость выше. У людей старшего поколения и тех кто с компьютером на Вы ничего не выходит.
+1
Неточное описание поведения
Сначала у меня получалось не всегда.
Потом я нашёл надёжный способ выбрать любой пункт —
1.открыть дропдаун
2. не торопясь посмотреть на варианты
3. тут надо успеть за 100мс: нажать/зажать ctrl или shift или alt и сразу кликнуть мышкой
также работает если зажать кнопку заранее, потом отпустить и быстро кликнуть, но намного менее надёжно
Потом я нашёл надёжный способ выбрать любой пункт —
1.открыть дропдаун
2. не торопясь посмотреть на варианты
3. тут надо успеть за 100мс: нажать/зажать ctrl или shift или alt и сразу кликнуть мышкой
также работает если зажать кнопку заранее, потом отпустить и быстро кликнуть, но намного менее надёжно
0
Долго не мог понять в чём дело, но всё же баг воспроизвёл. Посему вопрос: как можно было так криво сделать?
+1
Это появилось из-за хака для всех браузеров кроме Хрома. В этих браузерах нельзя понять чем было вызвано событие blur, переводом фокуса или программно, поэтому пришлось проверять через некоторый промежуток времени что инпут действительно потерял фокус и триггерить blur на элементе селекта. Причем из-за особенностей браузерной работы с событиями этот промежуток времени не маленький. С 10 мс не работало, с 50 мс через раз. github.com/tamtakoe/oi.select/blob/0.2.8/src/services.js#L99
0
А какая разница как вызывается blur? Зачем этот хак?
+1
А я, кажется, второй баг нашел — на странице «Funny» выбор с клавиатуры (нажатием Enter) не работает вообще никак.
Решил что я, наверное, совсем плохой программист )))
Решил что я, наверное, совсем плохой программист )))
+3
На странице Customization не скроллится список тачем, если при открытом списке тапнуть на строку. Win 10 + Firefox 41
0
Пара багов:
1) 938 пикселей по ширине экран www.dropbox.com/s/qupszykt884axpb/Screenshot%202015-08-30%2013.24.55.png?dl=0
2) Не открывается вверх, если места снизу нет www.dropbox.com/s/k8vbs275eirphyt/Screenshot%202015-08-30%2013.25.31.png?dl=0
3) Если открыть выпадашку стрелками, то автокамплит не работает, нельзя ввести значение, можно только выбрать. Хотя, это может быть и фича такая.
Пара замечаний:
1) На мобильных устройствах желательно оставлять оригинальный селект.
2) Если у контейнера, в котором лежит селект будет overflow:hidden, то могут быть неприятные баги. Например, обрезанная выпадашка.
3) Еще не нашел оригинального селекта на странице. Он удаляется?
1) 938 пикселей по ширине экран www.dropbox.com/s/qupszykt884axpb/Screenshot%202015-08-30%2013.24.55.png?dl=0
2) Не открывается вверх, если места снизу нет www.dropbox.com/s/k8vbs275eirphyt/Screenshot%202015-08-30%2013.25.31.png?dl=0
3) Если открыть выпадашку стрелками, то автокамплит не работает, нельзя ввести значение, можно только выбрать. Хотя, это может быть и фича такая.
Пара замечаний:
1) На мобильных устройствах желательно оставлять оригинальный селект.
2) Если у контейнера, в котором лежит селект будет overflow:hidden, то могут быть неприятные баги. Например, обрезанная выпадашка.
3) Еще не нашел оригинального селекта на странице. Он удаляется?
0
Баги:
1) поправлю
2) Стандартный селект не поднимается наверх
Но идея хорошая, нужно будет сделать с помощью CSS.
3) не удалось повторить. Это в каком примере наблюдается?
Замечания:
1) В мобильных устройствах так же нет автокомплита, поэтому стандартный селект не прокатит.
2) Не знаю как это побороть и надо ли. Тут, наверное, будет лучше сделать вариант с выпадашкой наверх.
3) Стандартного селекта там нет. С ним получалось слишком костыльно.
1) поправлю
2) Стандартный селект не поднимается наверх
Но идея хорошая, нужно будет сделать с помощью CSS.
3) не удалось повторить. Это в каком примере наблюдается?
Замечания:
1) В мобильных устройствах так же нет автокомплита, поэтому стандартный селект не прокатит.
2) Не знаю как это побороть и надо ли. Тут, наверное, будет лучше сделать вариант с выпадашкой наверх.
3) Стандартного селекта там нет. С ним получалось слишком костыльно.
0
2) Открывается наверх, попробуйте сделайте селект в самом низу страницы, без открытых дев-тулзов. Он откроется вверх.
3) В любом. Просто делаете фокус на селект и нажимаете стрелку вниз. Селект откроется, а написать ничего нельзя.
Про замечания:
1) Видимо стоит только для этого случая оставить кастомный. В остальных случаях 100% удобнее пользоваться нативным.
2) Стоит, неизвестно, в каком месте селект будет вызываться. Побороть легко, просто держите выпадашку в самом низу body и подцепляйте ее при открытии к селекту.
3) А в чем были костыли?
3) В любом. Просто делаете фокус на селект и нажимаете стрелку вниз. Селект откроется, а написать ничего нельзя.
Про замечания:
1) Видимо стоит только для этого случая оставить кастомный. В остальных случаях 100% удобнее пользоваться нативным.
2) Стоит, неизвестно, в каком месте селект будет вызываться. Побороть легко, просто держите выпадашку в самом низу body и подцепляйте ее при открытии к селекту.
3) А в чем были костыли?
+1
3) Странно. У меня можно писать и в Хроме и в ФФ. Что за система/браузер?
Подумаю, чтобы аппендить выпадашку к body или сделать такую опцию как в angular-bootstap для тултипов
Пробовал способ, когда в основе лежит стандартный селект, скрытый из виду, и в него копируются опции из oi-select. Нужно было перекомпилировать элемент, следить чтобы связь между областями видимости не порвалась при использовании, например, ng-if на директиве. Код был сложнее для восприятия, да и смысла не было, т. к. всё равно почти вся функциональность не была привязана к стандартному селекту.
Подумаю, чтобы аппендить выпадашку к body или сделать такую опцию как в angular-bootstap для тултипов
Пробовал способ, когда в основе лежит стандартный селект, скрытый из виду, и в него копируются опции из oi-select. Нужно было перекомпилировать элемент, следить чтобы связь между областями видимости не порвалась при использовании, например, ng-if на директиве. Код был сложнее для восприятия, да и смысла не было, т. к. всё равно почти вся функциональность не была привязана к стандартному селекту.
0
tamtakoe.github.io/oi.select/#/select/#grouping клик на стрелку или открытие клавишами не дает вводить ничего. Mac Ось, любой браузер.
0
Во-первых, он на jQuery, который уже как пол года назад удалось выпилить из проекта. Из jQuery нужна была только функция определения высоты элемента (меньше 100 строчек). Тащить ради нее всю библиотеку как-то странно.
Во-вторых, никакой совместимости по АПИ там и близко нет. Пришлось бы писать огромный адаптер или мучиться.
В-третьих, слишком много отсебятины. Для множественного выбора поле ввода находится в строке с выбранными элементами, для одиночного — в списке, чтобы удалить тег нужно попасть по маленькому крестику, какие-то крестики для одиночного ввода… Не продуманный дизайн. Такое ощущение, что его писали разные люди, которые не смогли договориться.
Во-вторых, никакой совместимости по АПИ там и близко нет. Пришлось бы писать огромный адаптер или мучиться.
В-третьих, слишком много отсебятины. Для множественного выбора поле ввода находится в строке с выбранными элементами, для одиночного — в списке, чтобы удалить тег нужно попасть по маленькому крестику, какие-то крестики для одиночного ввода… Не продуманный дизайн. Такое ощущение, что его писали разные люди, которые не смогли договориться.
0
А как насчет angular-ui-select?
0
Практически то же самое. Год назад он был самым вменяемым, но, по сути, представлял обертку над select2, тащил jQuery и был глючным. Сейчас плагины подросли, но до уровня oi.select все еще не дотягивают. Пока ни один плагин не учитывает, что у Ангуляра есть готовое АПИ для селекта и предлагает свое, а это показатель уровня разработчиков.
P. S. Понравился в свое время brianreavis.github.io/selectize.js, с него скопировал лучшие наработки в дизайне.
P. S. Понравился в свое время brianreavis.github.io/selectize.js, с него скопировал лучшие наработки в дизайне.
0
По-моему, слишком много отсебятины. Какие-то крестики для очистки модели в одиночном инпуте. Для одиночного и множественного селекта поля поиска выглядят по-разному, список не закрывается по щелчку на пустом поле ввода (родной селект так себя не ведет). И как-то всё неаккуратно.
0
очистка в одиночном удобно, если есть несколько зависимых списков.
например,
страна — город — улица
тогда при очистке страны очищается и страна, и все зависимые.
одним кликом
например,
страна — город — улица
тогда при очистке страны очищается и страна, и все зависимые.
одним кликом
0
А есть так, чтобы было как это tamtakoe.github.io/oi.select/#/select/#editableoptions, но с возможностью добавлять свои таги, а не только те, которые есть в списке?
0
См. prompt, autocomplete. Об особенностях описано в статье
+1
0
Поправил
+1
вероятно, здесь в конце нужно писать newItemFn?
0
какой-то странный баг — добавляет только ОДНО, первое значение. а дальше — ничего…
и только если редактируешь и опять добавляешь, тогда начинает добавлять и дальше.
и только если редактируешь и опять добавляешь, тогда начинает добавлять и дальше.
0
Как customize delete button?
0
delete button на самом деле нет. Ее добавляет фильтр по-умолчанию
В
.filter('oiSelectCloseIcon', ['$sce', function($sce) {
return function(label) {
var closeIcon = '<span class="close select-search-list-item_selection-remove">×</span>';
return $sce.trustAsHtml(label + closeIcon);
};
}])
В
selectFilter
можно переопределить на свой фильтр и делать там что угодно +1
Почему, когда фокус убирается с поля ввода, элемент добавляется? Возможно ли сделать так, чтобы добавлялся только по enter?
0
Баг — если редактируешь значение, то если в это время удалить другой элемент, то пропадают оба элемента.
0
Сейчас если стоит режим редактирования элементов, то удалить элемент как-бы нельзя. Т. е. из модели он удаляется, но на его месте остается его текст. Если вводить какой либо текст и удалить при этом любой элемент, то вводимый ранее текст заменится на текст удаленного элемента. Должно так работать
+1
how to customized full own template.html?
0
и ещё
newItemModel: {id: null, name: $query},
как-бы id автоинкремент сделать?
update: понял, использовать newItemFn
newItemModel: {id: null, name: $query},
как-бы id автоинкремент сделать?
update: понял, использовать newItemFn
0
по поводу бага — выбор по enter тоже не работает))
0
Вот такое еще есть mbenford.github.io/ngTagsInput/demos
+1
Спасибо за классную реализацию сохранения новой модели (http://tamtakoe.github.io/oi.select/#/select/#prompt).
Давно пытался найти такой плагин.
Сейчас очень серьезно размышляю о переходе с angular-ui/ui-select на ваше решение в своем большом проекте.
Подскажите, можно ли сделать вывод списка вот в таком формате:
Скриншот из демки ui-select
Нужно, чтобы в выпадающем меню выводилось несколько разных параметров, согласно моему шаблону, и чтобы работал фильтр (поиск) по всем параметрам (или, как это можно в ui-select, по тем, которые нужны).
Я нашел только такой пример — http://tamtakoe.github.io/oi.select/#/select/#customization, но там фильтр не работает совсем.
Давно пытался найти такой плагин.
Сейчас очень серьезно размышляю о переходе с angular-ui/ui-select на ваше решение в своем большом проекте.
Подскажите, можно ли сделать вывод списка вот в таком формате:
Скриншот из демки ui-select
Нужно, чтобы в выпадающем меню выводилось несколько разных параметров, согласно моему шаблону, и чтобы работал фильтр (поиск) по всем параметрам (или, как это можно в ui-select, по тем, которые нужны).
Я нашел только такой пример — http://tamtakoe.github.io/oi.select/#/select/#customization, но там фильтр не работает совсем.
0
Ответил случайно в корень, а не в эту тему. Запилил простенькую реализацию поиска по другим полям для плоских объектов tamtakoe.github.io/oi.select/#/select/#filtered
+1
Для форматирования выбранных тегов нужно использовать
— задать в качестве списка функцию, принимающую поисковую строку и возвращающую список tamtakoe.github.io/oi.select/#/select/#lazyloading
— переопределить
Вообще, подумаю, чтобы расширить встроенный
P. S. Как минимум в одном большом проекте это решение уже используется — в моём, так что если какие-то серьезные баги всплывают, узнаю об этом очень быстро)
searchFilter
, для вариантов в списке — dropdownFilter
. Поиск осуществляется только по одному полю, указанному в oi-options
(что полностью соответствуют ng-options
), но можно самому формировать поисковую выдачу:— задать в качестве списка функцию, принимающую поисковую строку и возвращающую список tamtakoe.github.io/oi.select/#/select/#lazyloading
— переопределить
listFilter
в который передается поисковая строка и список в которой так же можно как угодно этот список фильтровать tamtakoe.github.io/oi.select/#/select/#customizationВообще, подумаю, чтобы расширить встроенный
listFilter
, чтобы туда передавать параметры для поиска по другим полям.P. S. Как минимум в одном большом проекте это решение уже используется — в моём, так что если какие-то серьезные баги всплывают, узнаю об этом очень быстро)
+2
Можно ли сделать autocomplete по ajax?
0
Запросто. Возвращай промис в функции, формирующей список и ищи в базе по строке tamtakoe.github.io/oi.select/#/select/#lazyloading
+1
как повесить на Enter обработчик события?
0
Никак нельзя (конечно, можно обернуть все в свою директиву или найти элемент селекта в контроллере, а там найти инпут и повеситься на Enter, но это нехорошо).
Нужно следить за изменением модели с помощью
Нужно следить за изменением модели с помощью
watch
и выполнять нужные действия. Так код будет максимально независим от элемента селекта. 0
Вы могли бы добавить в код возможность подписки на событие keyDown в поле ввода?
0
И ещё есть баг — если в пустое поле ввода сделать фокус, то вызывается функция autocomplete с пустым запросом. Думаю, нужно сделать так, чтобы не вызывалась.
0
К сожалению, пришлось отказаться от вашего плагина по причине отсутствия API событий и возможности расширения.
Сделал на коленке за часик свой редактор тагов.
Сделал на коленке за часик свой редактор тагов.
0
Спасибо вам за плагин. Постепенно осваиваем как прозрачную замену чёрному ящику из костылей select2.
Пока возник вопрос с динамическими интерполяциями.
В нашем случае на форме при смене типа автомобиля меняется источник данных для списка трансмиссий, и одновременно обязательность этого поля. Если поле становится необязательным, пользователь должен уметь его очистить. В директиве есть опция
Есть ли возможность реализовать разбор
Спасибо!
Пока возник вопрос с динамическими интерполяциями.
В нашем случае на форме при смене типа автомобиля меняется источник данных для списка трансмиссий, и одновременно обязательность этого поля. Если поле становится необязательным, пользователь должен уметь его очистить. В директиве есть опция
cleanModel
, но она проверяется один раз при компиляции, так что oi-select-options="{cleanModel:isRequired(vehicleType)}"
выполнится только для исходного состояния формы. Смена vehicleType
не приведёт к вычислению нового значения cleanModel
и не разрешит очищать поле.Есть ли возможность реализовать разбор
elementOptions
динамически и навесить этот разбор на нужные $watch
(в нашем случае, смена источника данных)? Перекомпилировать всю директиву ради этого выглядит большим оверхедом.Спасибо!
0
Sign up to leave a comment.
Мультиселект и автокомплит на AngularJS