igor10k / ikselect Goto Github PK

Пример: http://jsfiddle.net/mh7Y9/

Пояснение:

Есть необходимость показыватьселект меню только по клику.
Оборачиваю select в div с классом display:none. По клику на span.show диву присваивается свойство display:block;
При этом у выпадающего списка с опциями сбрасывается дефолтное значение height:200px, а вместо него выставляется height:auto.

Hello, thanks for nice plugin.

Problem: fake and original selects don't synchronize properly when original changed programmatically.
Case: change original select programmatically (E.g.: selectElement.selectedIndex = 2).

In this case ikSelect doesn't update itself. And there is no method to do this manually, something like "sync" or "refresh".

I've found a workaround, but it's haky a little bit:

$('select.mySelect').ikSelect('showDropdown').ikSelect('hideDropdown');

So it's looks like there is two options:

1. make an auto synchronization (didn't investigate yet), or
2. add a public method to synchronize fake and original selects.

не выскакивает стандартный select в Ipad при клике на стилизованный

Если selec открыт и изменить, например, ширину окна браузера, то selec оказывается не на своём месте.
Можно либо скрывать, либо с помощью debounce повесить событие resize и переопределять положение.

Если включена опция filter, то при клике вне выпадающего списка (для отмены выбора и закрытия списка) список закрывается, но вариант все равно выбирается, при этом визуально это становится видно только при следующем клике по списку. Воспроизводилось в Firefox (34.0.5).

Я начал внедрять Вам контрол у себя на сайте и столкнулся с несколькими проблемами.

Выскажу свои соображения.
Ширина стандартного контрола в мобильном браузере должна равняться 100% иначе получается что в некоторых случаях мы можем вызывать переопределенное меню (Когда промахиваемся мимо)
ну или...
if ($.browser.mobile) {
select.css({
opacity: 0,
left: 0,
height: fakeSelect.height(),
width: fakeSelect.width() /* Этого сейчас нет */
});
}

И второй момент...
высота стандартного контрола может не изменяться правильно при задании в вышеуказанном блоке height если не определены другие стили для select, например
.ik_select select {
border: 1px solid transparent; /* Помогает при установке высоты :) */
}

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

Здравствуйте. Передо мной встала задача обновить option'ы, если быть точнее заменить их полностью.
Как делаю я:

1. аякс-запрос на сервер
2. в результате ответа от сервера в json массиве я формирую текстовую переменную с обновлёнными option (list = "text")
3. заменяю содержимое старого селекта: $('select').html(list);
4. делаю $('select').ikSelect()

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

Хотелось бы чтобы ikSelect обновил данные.

P.S. Игрался с detach и redraw. Ничего не помогает

Привет!

    $(".bid_select").ikSelect({
        customClass: "bid_select",
        ddCustomClass: "bid_select",
        autoWidth: true
    });

    $('.bid_select').change(function() {
        console.log(2);

    });

2 раза срабатывает

--- jquery.ikSelect.js 2013-04-15 18:32:27.000000000 +0300
+++ jquery.ikSelect.js.fixed 2013-05-31 14:29:14.940059118 +0300
@@ -394,7 +394,7 @@
}
}

•                   if (ikselect.options.filter) {
  

•                   if (ikselect.options.filter && ! $.browser.mobile) {
                          filter.show().outerWidth(ikselect.filterWrap.width());
                  }
  

Если мы у ставить атрибут required и подключаем ikSelect, то браузер не выводит подсказку, что поле нужно заполнить. Он не даёт отправить форму, но подсказку не выводит. Рассмотреть возможность использования атрибута required.

Иногда бывает необходимо задать какой-то стиль для ссылки (.ik_select_link), когда селект раскрыт (стрелочку там развернуть, или ещё что). В связи с этим, было бы здорово добавлять какой-то класс для .ik_select (например «.ik_select_opened») в функции show_block() и убирать его в hide_block() соответственно.

Может кому пригодится, сейчас можно решить вот таким некрасивым костылём:

$(function(){
    $('select').ikSelect();

    var $body = $(body);

    //При клике по ссылкам-селектам
    $body.on('click.ikSelect', '.ik_select_link', function(){
        //Родитель
        var $select = $(this).parents('.ik_select:first');

        //Если он не заблокирован и не открыт
        if(!$select.data('ik_select_disabled') && !$select.hasClass('ik_select_opened')){
            //Закроем все открытые (т.к. за раз открывается только один)
            $('.ik_select.ik_select_opened').removeClass('ik_select_opened');
            //Укажем, что он открыт
            $select.addClass('ik_select_opened');
        }
    });

    //Убирание откраывающего класса для селектов
    $body.on('click.ikSelect', function(event){
        var $target = $(event.target);

        //Если произошёл клик по одному из пунктов выпадающего списка
        if ($target.parents('.ik_select_block').length > 0 ||
            //Или куда-нибудь по любому другому месту, кроме самого селекта
            ($('.ik_select_block:visible').length > 0 && $target.parents('.ik_select').length == 0)
        ){
            //Убираем соответствующий класс у открытого селектора
            $('.ik_select.ik_select_opened').removeClass('ik_select_opened');
        }
    });
});

Не работает под Android 4.0, как во встроенном браузере, так и в Firefox и Opera.

Привет, как насчет включить поддержку amd модуля?
На работе часто используем Ваш плагин, а так же используем require js. Было бы круто, если бы была поддержка из коробки.

Example in firebug in demo page

Third option was selected via mouse, so in fake select it selected but in original none;

Поискал в документации эту функцию и не нашел. Заглянул в код - нашел.

Собственно планируется?

Привет, некоторые соображения по поддержке:

• package.json
• bower.json
• jshint
• ci (travis-ci ?)
• testing
• отделить исходники от продакшена(в последнее время часто вижу структуру, dist и src, но тут, наверное, каждый сам решает)

С тестами не работал, но было бы интересно попробовать, если решите завести.

Могу потихоньку добавлять.

Доброго времени суток.

На демо-страничке (http://igor10k.github.io/ikSelect/) взгляните на последний пример с фильтром. Если вводить название страны с маленькой буквы, то все хорошо. Но если с большой - то "Nothing found".

Это нелогично, хотя бы потому, что в самом списке названия начинаются с заглавных букв.

в функцию _changeSelectedHtml из _changeSelected передаем "e"
и добавляем
$(element).find('option').removeAttr('selected');
$(element).find('option[value="'+e.data('value')+'"]').attr("selected", true);

Привет, думаю стоит добавить библиотеку в какой нибудь cdn ресурс для библиотек?
Например, cdnjs или jsdelivr

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

Bug:

1. Use "Tab" key to focus in ikSelect
2. Press "Up/Down" arrows to choose some value
3. Press "Tab" again to commit changes and go to next input
   Bug: Selected value is user value +/-1 position.

Software:
WIndows7 x32; Firefox 26.0

Possible solution:
This patch is worked for me.

// sync selected option in the fake select with the original one
_syncFakeOption: function () {
    if(!$.browser.mozilla || this.$dropdown.is(':visible'))//add this to solve this bug
        this.el.selectedIndex = this.hoverIndex;
},

Можно ли отделить, хотя-бы комментариями, нормальный CSS код от фиксов для старых браузеров?
Становится сложно разобраться в стилях, когда все в перемешку

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

Оформление кода html кода для ikSelect:

<select id="selector">
    <option value="value1">One</option>
    <option value="value2" selected="selected">Two</option>
    <option value="value3">Three</option>
</select>

Оформление кода html кода, синтаксис и генерируемый html код у twitter-bootstrap один и тот же, html просто "оживляется" javascript

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <span>one</span>
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">one</a></li>
        <li><a tabindex="-1" href="#">two</a></li>
        <li><a tabindex="-1" href="#">three</a></li>
    </ul>
</div>

Сиснтаксис ikSelect:

<div class="ik_select_link">
    <span class="ik_select_link_text"></span>
</div>
<div class="ik_select_block">
    <div class="ik_select_list"></div>
</div>

Генерируемый html код:
ikSelect

<div class="ik_select" style="width: 70px;">
    <div class="ik_select_link"><span class="ik_select_link_text">One</span></div>
    <select id="selector" style="position: absolute; margin: 0px; padding: 0px; left: -9999px; top: 0px;" class="ik_select_opened">
        <option value="value1">One</option>
        <option value="value2" selected="selected">Two</option>
        <option value="value3">Three</option>
    </select>

    <div class="ik_select_block" style="display: none; width: 70px;">
        <div class="ik_select_list" style="position: static;">
            <div class="ik_select_list_inner" style="width: 70px; float: none; height: auto;">
                <ul style="width: 70px;">
                    <li class="ik_select_has_events ik_select_hover ik_select_active">
                        <span class="ik_select_option" title="value1">One</span></li>
                    <li class="ik_select_has_events"><span class="ik_select_option" title="value2">Two</span></li>
                    <li class="ik_select_has_events"><span class="ik_select_option" title="value3">Three</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>

что сильно отличается от твиттерского шаблона.

Если использовать syntax таким образом

syntax: '<div class="btn-group"><a class="ik_select_link btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="ik_select_link_text"></span><span class="caret"></span></a><div class="ik_select_block"><div class="ik_select_list"></div></div></div>'

<div class="btn-group">
    <a class="ik_select_link btn dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="ik_select_link_text"></span>
        <span class="caret"></span>
    </a>

    <div class="ik_select_block">
        <div class="ik_select_list"></div>
    </div>
</div>

то генерируемый код становится таким

<div class="ik_select" style="width: 70px;">
    <div class="btn-group">
        <a class="ik_select_link btn dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="ik_select_link_text">One</span>
            <span class="caret"></span></a>
    </div>
    <select id="Selector" style="position: absolute; margin: 0px; padding: 0px; left: -9999px; top: 0px;" class="ik_select_opened">
        <option value="value1">One</option>
        <option value="value2" selected="selected">Two</option>
        <option value="value3">Three</option>
    </select>

    <div class="ik_select_block" style="display: none; width: 70px;">
        <div class="ik_select_list" style="position: static;">
            <div class="ik_select_list_inner" style="width: 70px; float: none; height: auto;">
                <ul style="width: 70px;">
                    <li class="ik_select_has_events"><span class="ik_select_option" title="value1">One</span></li>
                    <li class="ik_select_has_events"><span class="ik_select_option" title="value2">Two</span></li>
                    <li class="ik_select_has_events ik_select_hover ik_select_active">
                        <span class="ik_select_option" title="value3">Three</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>

что уже ближе к оригиналу, но все равно "не айс"

можно ли добавить специальный синтаксис, включаемый по параметру twitter-bootstrap:true?

почитать про twitter-bootstrap dropdown можно здесь
http://twitter.github.com/bootstrap/components.html#dropdowns
http://twitter.github.com/bootstrap/javascript.html#dropdowns

Собственно, хотелось узнать, нет ли желания добавить editorconfig в репозиторий?
А то свои настройки сбивают Ваше оформление(пробелы/табуляция). Приходилось подгонять.

Definitely needed.

Обнаружил что невозможно сделать смесь из простых Option и Oprtgroup, что вроде позволяет спецификация

например
< select name="f2" id="f2" >
< option value="1">Опция1< /option>
< optgroup label="Блок опций">
< option value="21">Опция 2-1< /option>
< option value="22">Опция 2-2< /option>
< option value="23">Опция 2-3< /option>
< /optgroup>
< option value="3">Опция3< /option>
< /select>

ikSelect выдает только содержимое группы, строки 1и 3 (т.е. без группы) исчезают :(
*сорри на знаю как тут код вставлять чтоб было нормально :( Но, думаю ,суть ясна )

Возможно ли реализовать нестандартный скроллинг в выпадающем списке?

Привет, интересует, жив ли еще проект, или посоветуете альтернативу?

Select dropdown stick to bottom positioned incorrectly if page will be scrolled

1. При большом количестве данных, фильтр (автодополнение) работает медленно (время отклика более 5 секунд), хотели использовать селект для поиска по списку городов (2500 значений)

2. при большом количестве данных страница загружается дольше, было бы неплохо при прокрутке списка динамически подгружать список объектов с сервера. Пример: http://demos.telerik.com/aspnet-ajax/combobox/examples/populatingwithdata/autocompletesql/defaultcs.aspx

Бывают случаи когда нужно инициализировать select без option. В 0.9 версии это сделать не получается http://jsfiddle.net/MsDsR/

Fancybox - очень популярные всплывашки у фронтендщиков. Особенно, они любят в эти всплывашки засовывать формы. Обидно, что во всплывашках ikselect дико глючит ( left и top у .ik_select_block_up )

Соль в том, что ikselect ( также как и fancybox ) суёт .ik_select_block_up сразу потомком body ( у fancybox - это .fancybox-wrap ). Может попробовать сделать, чтобы ikselect детектил открытый fancybox и, если находил, то правильно считал top и left.

Я к сожалению плохо разбираюсь в особенностях кода для ие, но интересно. Уменьшился ба размер плагина, если оставить поддержку с ie9 ?

is there any way to use 'multiple' attribute in your plugin?

sorry, found the answer

Hello,
I have noticed that there is no native control on mobiles; I use jQuery 1.11.1 and there is no $.browser variable. I found code what set this var from navigator.userAgent:

if (! $.browser) {
    ...
}

But there is no $.browser.mobile property which is checked in init function.
I think, it should be some code for detect mobile, like in previouse version:

$.browser.mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

Без этого API неполноценно.
Например можно что-то сделать какое-то действие после открытия select, но нельзя убрать результаты этого действия после закрытия select.

Так же не работают комбинации Shift+(Home/End) для выделения текста

Можно убедиться на демо-странице в последнем селекте http://igor10k.github.com/ikSelect/

P.S.: спасибо за отличный плагин

Disabled option does not supported properly, can be selected

Не думаете о том, что бы в будущем убрать jquery зависимость? Я думаю это было бы правильным шагом в развитии плагина.