responsivewebframework/src/js/combo-box.js

Jalasoft Foundation Front End Framework ========================================

$(function() {
    "use strict";
    var arrowDown = '퐋';
    var arrowUp= '퐙';
    $('.combo').before('<div class="combo-box-container"></div>');

    $('.combo-box-container').append('<div contenteditable class="combo-box">Type or select</div>');
    $('.combo-box')
        .before('<div class="combo-box-button">' + arrowDown + '</div>')
        .after('<div class="combo-box-list"></div>')
        .focusin(function() {
        $(this).text('');
        $(this).toggleClass('combo-box-typing')
        })
        .keyup(function() {
            text = $(this).text();
            for (var i = 0; i < values.length; i++) {
                var te = values[i];
                if (te.search(text) === 0) {
                    return;
                }
            }
        });
    var values =[];
    var i=0;
    $('.combo-box-list').slideUp();
    var options = $('.combo');
    $('.combo-box-list').each(function() {
        var count = 0;
        var $s = $(this);
        $.map(options[i] ,function(option) {
            $s.append('<div class="combo-box-option" value ="' + option.value + '">' + option.text + '</div>');
            values.push(option.text);
            count++;
        });
        i++;
        if(count >= 4){
            $(this).addClass('jl-scrollbar-inner');
            $(this).addClass('combo-box-list-scroll');
        }
    });

    $('.combo-box-button').click(function() {
        $(this).parent().children('.combo-box-list').toggleClass('combo-box-list-active');
        checkArrow($(this));
    });

    $('.combo-box-option').click(function() {
        $(this).closest('.combo-box-list').toggleClass('combo-box-list-active');
        $(this).closest('.combo-box-container').children('.combo-box')
            .text($(this).text())
            .addClass('combo-box-option-select');
        checkArrow( $(this).closest('.combo-box-container').children('.combo-box-button'));
    });

    $('.combo-box').focusout(function(){
        $(this).text('Type or select');
        $(this).toggleClass('combo-box-typing');
    });

    var arrowFlag = false;
    var checkArrow = function($box) {
        if(arrowFlag){
            arrowFlag = false;
            $box.text(arrowDown);
        }else{
            arrowFlag = true;
            $box.text(arrowUp);
        }
    };
    var text;

});