src/bselect.js
function setup( elem, options ) {
        var caret, label, container, id, dropdown;
        var $elem = $( elem );

        // First of, let's build the base HTML of BSelect
        id = ++elements;
        container = $( "<div class='bselect' />", {
            id: "bselect-" + id
        });

        dropdown = $( "<div class='bselect-dropdown' />" );

        // Configure the search input
        if ( options.searchInput === true ) {
            var search = $( "<div class='bselect-search' />" );

            $( "<input type='text' class='bselect-search-input' />" ).attr({
                role: "combobox",
                tabindex: 1,
                "aria-expanded": "false",
                "aria-owns": "bselect-option-list-" + id

                // The W3C documentation says that role="combobox" should have aria-autocomplete,
                // but the validator tells us that this is invalid. Very strange.
                //"aria-autocomplete": "list"
            }).appendTo( search );

            $( "<span class='bselect-search-icon' />" )
                .append( "<i class='icon-search'></i>" )
                .appendTo( search );

            search.appendTo( dropdown );
        }

        $( "<div class='bselect-message' role='status' />" ).appendTo( dropdown );

        $( "<ul class='bselect-option-list' />" ).attr({
            id: "bselect-option-list-" + id,
            role: "listbox"
        }).appendTo( dropdown );

        container.append( dropdown ).insertAfter( $elem );

        // Save some precious data in the original select now, as we have the container in the DOM
        $elem.data( dataName, {
            options: options,
            element: container,
            open: false
        });

        updateOptions( $elem, $.bselect.defaults, options );
        _callMethod( $elem, "refresh" );

        $elem.bind( "bselectselect.bselect", options.select );
        $elem.bind( "bselectselected.bselect", options.selected );
        $elem.bind( "bselectsearch.bselect", options.search );

        label = $( "<span />" ).addClass( "bselect-label" ).text( getPlaceholder( $elem ) );
        caret = $( "<button type='button' />" ).addClass( "bselect-caret" )
                                               .html( "<span class='caret'></span>" );
        container.prepend( caret ).prepend( label );

        label.outerWidth( $elem.outerWidth() - caret.outerWidth() );

        // Hide this ugly select!
        $elem.addClass( "bselect-inaccessible" );

        // We'll cache the container for some actions
        instances.push( $elem );

        // Event binding
        container.find( ".bselect-search-input" ).keyup( $.proxy( methods.search, $elem ) );
        container.on( "click", ".bselect-option", $.proxy( methods.select, $elem ) );
        container.on( "click", ".bselect-caret, .bselect-label", $.proxy( methods.toggle, $elem ) );
        container.on( "keydown", ".bselect-option, .bselect-search-input", handleKeypress );

        // Issue #6 - Listen to the change event and update the selected value
        $elem.bind( "change.bselect", function() {
            var data = $elem.data( dataName );
            var index = data.itemsMap[ this.value ];

            if ( data.tempDisable ) {
                data.tempDisable = false;
                return;
            }

            _callMethod( $elem, "select", index );
        }).trigger( "change.bselect" );
    }
function setup( elem, options ) {
        var caret, label, container, id, dropdown;
        var $elem = $( elem );

        // First of, let's build the base HTML of BSelect
        id = ++elements;
        container = $( "<div class='bselect' />", {
            id: "bselect-" + id
        });

        dropdown = $( "<div class='bselect-dropdown' />" );

        // Configure the search input
        if ( options.searchInput === true ) {
            var search = $( "<div class='bselect-search' />" );

            $( "<input type='text' class='bselect-search-input' />" ).attr({
                role: "combobox",
                tabindex: 1,
                "aria-expanded": "false",
                "aria-owns": "bselect-option-list-" + id

                // The W3C documentation says that role="combobox" should have aria-autocomplete,
                // but the validator tells us that this is invalid. Very strange.
                //"aria-autocomplete": "list"
            }).appendTo( search );

            $( "<span class='bselect-search-icon' />" )
                .append( "<i class='icon-search'></i>" )
                .appendTo( search );

            search.appendTo( dropdown );
        }

        $( "<div class='bselect-message' role='status' />" ).appendTo( dropdown );

        $( "<ul class='bselect-option-list' />" ).attr({
            id: "bselect-option-list-" + id,
            role: "listbox"
        }).appendTo( dropdown );

        container.append( dropdown ).insertAfter( $elem );

        // Save some precious data in the original select now, as we have the container in the DOM
        $elem.data( dataName, {
            options: options,
            element: container,
            open: false
        });

        updateOptions( $elem, $.bselect.defaults, options );
        _callMethod( $elem, "refresh" );

        $elem.bind( "bselectselect.bselect", options.select );
        $elem.bind( "bselectselected.bselect", options.selected );
        $elem.bind( "bselectsearch.bselect", options.search );

        label = $( "<span />" ).addClass( "bselect-label" ).text( getPlaceholder( $elem ) );
        caret = $( "<button type='button' />" ).addClass( "bselect-caret" )
                                               .html( "<span class='caret'></span>" );
        container.prepend( caret ).prepend( label );

        label.outerWidth( $elem.outerWidth() - caret.outerWidth() );

        // Hide this ugly select!
        $elem.addClass( "bselect-inaccessible" );

        // We'll cache the container for some actions
        instances.push( $elem );

        // Event binding
        container.find( ".bselect-search-input" ).keyup( $.proxy( methods.search, $elem ) );
        container.on( "click", ".bselect-option", $.proxy( methods.select, $elem ) );
        container.on( "click", ".bselect-caret, .bselect-label", $.proxy( methods.toggle, $elem ) );
        container.on( "keydown", ".bselect-option, .bselect-search-input", handleKeypress );

        // Issue #6 - Listen to the change event and update the selected value
        $elem.bind( "change.bselect", function() {
            var data = $elem.data( dataName );
            var index = data.itemsMap[ this.value ];

            if ( data.tempDisable ) {
                data.tempDisable = false;
                return;
            }

            _callMethod( $elem, "select", index );
        }).trigger( "change.bselect" );
    }
function setup ( elem , options ) { var caret , label , container , id , dropdown ; var $elem = $ ( elem ) ; // First of, let's build the base HTML of BSelect
 id = ++ elements ; container = $ ( "<div class='bselect' />" , { id : "bselect-" + id } ) ; dropdown = $ ( "<div class='bselect-dropdown' />" ) ; // Configure the search input
 if ( options . searchInput === true ) { var search = $ ( "<div class='bselect-search' />" ) ; $ ( "<input type='text' class='bselect-search-input' />" ) . attr ( { role : "combobox" , tabindex : 1 , "aria-expanded" : "false" , "aria-owns" : "bselect-option-list-" + id // The W3C documentation says that role="combobox" should have aria-autocomplete,
 // but the validator tells us that this is invalid. Very strange.
 //"aria-autocomplete": "list"
 } ) . appendTo ( search ) ; $ ( "<span class='bselect-search-icon' />" ) . append ( "<i class='icon-search'></i>" ) . appendTo ( search ) ; search . appendTo ( dropdown ) ; } $ ( "<div class='bselect-message' role='status' />" ) . appendTo ( dropdown ) ; $ ( "<ul class='bselect-option-list' />" ) . attr ( { id : "bselect-option-list-" + id , role : "listbox" } ) . appendTo ( dropdown ) ; container . append ( dropdown ) . insertAfter ( $elem ) ; // Save some precious data in the original select now, as we have the container in the DOM
 $elem . data ( dataName , { options : options , element : container , open : false } ) ; updateOptions ( $elem , $ . bselect . defaults , options ) ; _callMethod ( $elem , "refresh" ) ; $elem . bind ( "bselectselect.bselect" , options . select ) ; $elem . bind ( "bselectselected.bselect" , options . selected ) ; $elem . bind ( "bselectsearch.bselect" , options . search ) ; label = $ ( "<span />" ) . addClass ( "bselect-label" ) . text ( getPlaceholder ( $elem ) ) ; caret = $ ( "<button type='button' />" ) . addClass ( "bselect-caret" ) . html ( "<span class='caret'></span>" ) ; container . prepend ( caret ) . prepend ( label ) ; label . outerWidth ( $elem . outerWidth ( ) - caret . outerWidth ( ) ) ; // Hide this ugly select!
 $elem . addClass ( "bselect-inaccessible" ) ; // We'll cache the container for some actions
 instances . push ( $elem ) ; // Event binding
 container . find ( ".bselect-search-input" ) . keyup ( $ . proxy ( methods . search , $elem ) ) ; container . on ( "click" , ".bselect-option" , $ . proxy ( methods . select , $elem ) ) ; container . on ( "click" , ".bselect-caret, .bselect-label" , $ . proxy ( methods . toggle , $elem ) ) ; container . on ( "keydown" , ".bselect-option, .bselect-search-input" , handleKeypress ) ; // Issue #6 - Listen to the change event and update the selected value
 $elem . bind ( "change.bselect" , function ( ) { var data = $elem . data ( dataName ) ; var index = data . itemsMap [ this . value ] ; if ( data . tempDisable ) { data . tempDisable = false ; return ; } _callMethod ( $elem , "select" , index ) ; } ) . trigger ( "change.bselect" ) ; }
Run all the setup stuff
Run all the setup stuff