example page bug

[artknight]

When using "searchable" example, arrow keys (up/down) are not working.

Please fix.

Thanks,

[Robdel12]

Do you mean when you open the select you can use arrow keys? I'm not sure how to get around that still give the input focus.

[artknight]

I think it would be OK if the input looses focus when the user is stepping through the results. So, basically it would a likely scenario that initially the user used the input to narrow down the result set, and then used the arrow keys to get down to the desired entry.

[artknight]

Anyways, In the meantime I have implemented a temporary solution. Here is the code below. Let me know if you come up with a better way. Thanks!

$.extend($.fn,{
searchDropdown: function(options){
var options = _.extend({},options),
keys = { UP:38, DOWN:40 };

    //must add .search-select class for proper styling
    this.addClass('search-select');

    return this.dropkick({
        mobile: true,
        initialize: function(){
            var $input,
                dk = this;

                dk.temp = {
                    found: dk.options,
                    lastSelectedIndex: dk.selectedIndex || 0
                };

            $('.dk-selected',dk.data.elem).after('<div class="dk-search"><input type="text" class="dk-search-input" placeholder="Search"></div>');
            $input = $('.dk-search-input',dk.data.elem);
            $input.on("click",function(event){
                event.stopPropagation();
            }).on('keypress keyup', function(event){
                event.stopPropagation();
                var keyCode = UTILS.getCharKey(event);

                if (keyCode===keys.UP){
                    dk.temp.lastSelectedIndex--;
                    (dk.temp.lastSelectedIndex < 0) && (dk.temp.lastSelectedIndex = 0);
                    dk.selectOne(dk.temp.found[dk.temp.lastSelectedIndex]);
                }
                else if (keyCode===keys.DOWN){
                    dk.temp.lastSelectedIndex++;
                    (dk.temp.lastSelectedIndex > dk.temp.found.length-1) && (dk.temp.lastSelectedIndex = dk.temp.found.length-1);
                    dk.selectOne(dk.temp.found[dk.temp.lastSelectedIndex]);
                }
                else {
                    dk.temp.found = dk.search(this.value, dk.data.settings.search);
                    dk.temp.lastSelectedIndex = 0;

                    $('.dk-option', dk.data.elem).remove();
                    if (dk.temp.found.length){
                        $(dk.temp.found).appendTo(dk.data.elem.lastChild);
                        dk.selectOne(dk.temp.found[0]);
                    }
                    else
                        $('<li></li>').addClass('dk-option dk-option-disabled').text('Not Found').appendTo(dk.data.elem.lastChild);
                }
            });
            ('selectedValue' in options) && dk.select(options.selectedValue);
        },
        search: options.search || 'strict',
        open: function(){
            $('.dk-search-input',this.data.elem).focus();
            ('open' in options) && options.open.call(this);
        },
        close: function(){
            $('.dk-search-input',this.data.elem).val("").blur();
            $('.dk-option',this.data.elem).remove();
            $(this.options).appendTo(this.data.elem.lastChild);
            ('close' in options) && options.close.call(this);
        },
        change: ('change' in options) ? options.change : new Function
    });
}

});

[Robdel12]

Ah, so I was afraid this was going to happen, and this is totally our fault. The search select on our example page is purely to show off the power of our API. It's not an official DK select.

So I think what we're going to do is remove that select from the example page and bring it back when I complete #274 with better messaging.