Events in ccombo

HTML

<script src="http://emtolis.gr/tsamigr/ccombo/libs/jquery.ba-outside-events.min.js"></script>
<script src="http://emtolis.gr/tsamigr/ccombo/v2.0/jquery.combo.js"></script>
<link rel="stylesheet" href="http://emtolis.gr/tsamigr/ccombo/v2.0/css/style.css">
<h1>ccombo - Explore ccombo events</h1>
<hr /><br />
<div class='example'>
    <div id='wrapper'></div>
</div>
<select id="group" style='display:none;'>
    <optgroup LABEL="Firefox">
        <option LABEL="2.0 or higher">Firefox 2.0 or higher</option>
        <option LABEL="1.5.x">Firefox 1.5.x</option>
        <option LABEL="1.0.x">Firefox 1.0.x</option>
    </optgroup>
    <optgroup LABEL="Microsoft Internet Explorer">
        <option LABEL="7.0 or higher">Microsoft Internet Explorer 7.0 or higher</option>
        <option LABEL="6.x">Microsoft Internet Explorer 6.x</option>
        <option LABEL="5.x">Microsoft Internet Explorer 5.x</option>
        <option LABEL="4.x">Microsoft Internet Explorer 4.x</option>
    </optgroup>
    <optgroup LABEL="Microsoft Internet Explorer 9">
        <option LABEL="B1">Beta 1</option>
        <option LABEL="B2">Beta 2</option>
        <option LABEL="B3">Beta 3</option>
        <option LABEL="B4">Beta 4</option>
    </optgroup>
    <optgroup LABEL="Opera">
        <option LABEL="9.0 or higher">Opera 9.0 or higher</option>
        <option LABEL="8.x">Opera 8.x</option>
        <option LABEL="7.x">Opera 7.x</option>
    </optgroup>
    <option >Safari</option>
    <option >Other</option>
</select>
<div id='logger' ></div>

CSS

.stylishBut {
    background: none repeat scroll 0 0 #F0F7FB;
    border: 1px solid #B8CFE5;
    color: #1C94C4;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    height: 25px;
    min-width: 70px;
    padding: 2px;
}

.stylishBut:hover{
    background: none repeat scroll 0 0 #FDFADA;    border: 1px solid #FBCB09;
    color: #C77405 !important;
    font-weight: bold;
}

.buttons{
    margin-bottom:10px;   
}

#logger{
    float:right;
    border:1px solid lightgrey;
    width:200px;
}

JavaScript

jQuery(document).ready(function() {
    var created = jQuery('#wrapper').combo({
        selectId: 'group',
        editable: true,
        callbacks: {
            onOpenList: function(combo) {
                logger("onOpenList");
                return true;
            },
            afterOpenList: function(combo) {
                logger("afterOpenList");
            },
            onCloseList: function(combo) {
                logger("onCloseList");
                return true;
            },
            onOpenLevel: function(combo, index, node) {
                logger("onOpenLevel");
                return true;
            },
            afterOpenLevel: function(combo, index, node) {
                logger("afterOpenLevel");
                return true;
            },
            onCloseLevel: function(combo, level, node) {
                logger("onCloseLevel");
                return true;
            },
            onChoose: function(combo, text, value) {
                logger("onChoose");
                return true;
            },
            afterChoose: function(combo, text, value) {
                logger("afterChoose");
            },
            onFocus: function(combo) {
                //onFocus event does not work as it should
                logger("onFocus");
            },
            onBlur: function() {
                logger("onBlur");
            }
        }
    });
    
    console.log( created[0].setItem('Other') );
});




function logger(msg) {
    jQuery('#logger').append(msg + '<br />');
}