src/main/webapp/resources/libs/sb-admin-v2/js/screening/jquery.selectric.js
// Generate options markup and event binds
Generate options markup and event binds
Generate options markup and event binds
function _populate() {
          _this.items = [];
          var $options = $original.children(),
              _$li = '<ul>',
              selectedIndex = $options.filter(':selected').index();
          currValue = (selected = ~selectedIndex ? selectedIndex : 0);
          if ( optionsLength = $options.length ) {
            $options.each(function(i){
              var $elm           = $(this),
                  optionText     = $elm.html(),
                  selectDisabled = $elm.prop('disabled'),
                  itemBuilder    = _this.options.optionsItemBuilder;
              _this.items[i] = {
                value    : $elm.val(),
                text     : optionText,
                slug     : _utils.replaceDiacritics(optionText),
                disabled : selectDisabled
              };
              _$li += _utils.format('<li class="{1}">{2}</li>',
                $.trim([i == currValue ? 'selected' : '', i == optionsLength - 1 ? 'last' : '', selectDisabled ? 'disabled' : ''].join(' ')),
                $.isFunction(itemBuilder) ? itemBuilder(_this.items[i], $elm, i) : _utils.format(itemBuilder, _this.items[i])
              );
            });
            $items.append( $itemsScroll.html(_$li + '</ul>') );
            $label.html(_this.items[currValue].text);
          }
          $wrapper.add($original).off(bindSufix);
          $outerWrapper.prop('class', [_this.classes.wrapper, $original.prop('class').replace(/\S+/g, pluginName + '-$&'), _this.options.responsive ? _this.classes.responsive : ''].join(' '));
          if ( !$original.prop('disabled') ){
            $outerWrapper.removeClass(_this.classes.disabled).hover(function(){
              $(this).toggleClass(_this.classes.hover);
            });
            _this.options.openOnHover && $wrapper.on('mouseenter' + bindSufix, _open);
            $wrapper.on('click' + bindSufix, function(e){
              isOpen ? _close() : _open(e);
            });
            $input.prop({
              tabindex: tabindex,
              disabled: false
            }).off().on({
              keypress: _handleSystemKeys,
              keydown: function(e){
                _handleSystemKeys(e);
                clearTimeout(_this.resetStr);
                _this.resetStr = setTimeout(function(){
                  $input.val('');
                }, _this.options.keySearchTimeout);
                var key = e.keyCode || e.which;
                if ( key > 36 && key < 41 )
                  _select(_utils[(key < 39 ? 'previous' : 'next') + 'EnabledItem'](_this.items, selected));
              },
              focusin: function(e){
                $input.one('blur', function(){
                  $input.blur();
                });
                isOpen || _open(e);
              }
            }).on('oninput' in $input[0] ? 'input' : 'keyup', function(){
              if ( $input.val().length ){
                $.each(_this.items, function(i, elm){
                  if ( RegExp('^' + $input.val(), 'i').test(elm.slug) && !elm.disabled ){
                    _select(i);
                    return false;
                  }
                });
              }
            });
            $original.prop('tabindex', false);
            $li = $('li', $items.removeAttr('style')).click(function(){
              _select($(this).index(), true);
              return false;
            });
          } else {
            $outerWrapper.addClass(_this.classes.disabled);
            $input.prop('disabled', true);
          }
          _utils.triggerCallback('Init', _this);
        }
function _populate ( ) { _this . items = [ ] ; var $options = $original . children ( ) , _$li = '<ul>' , selectedIndex = $options . filter ( ':selected' ) . index ( ) ; currValue = ( selected = ~ selectedIndex ? selectedIndex : 0 ) ; if ( optionsLength = $options . length ) { $options . each ( function ( i ) { var $elm = $ ( this ) , optionText = $elm . html ( ) , selectDisabled = $elm . prop ( 'disabled' ) , itemBuilder = _this . options . optionsItemBuilder ; _this . items [ i ] = { value : $elm . val ( ) , text : optionText , slug : _utils . replaceDiacritics ( optionText ) , disabled : selectDisabled } ; _$li += _utils . format ( '<li class="{1}">{2}</li>' , $ . trim ( [ i == currValue ? 'selected' : '' , i == optionsLength - 1 ? 'last' : '' , selectDisabled ? 'disabled' : '' ] . join ( ' ' ) ) , $ . isFunction ( itemBuilder ) ? itemBuilder ( _this . items [ i ] , $elm , i ) : _utils . format ( itemBuilder , _this . items [ i ] ) ) ; } ) ; $items . append ( $itemsScroll . html ( _$li + '</ul>' ) ) ; $label . html ( _this . items [ currValue ] . text ) ; } $wrapper . add ( $original ) . off ( bindSufix ) ; $outerWrapper . prop ( 'class' , [ _this . classes . wrapper , $original . prop ( 'class' ) . replace ( / \S+ / g , pluginName + '-$&' ) , _this . options . responsive ? _this . classes . responsive : '' ] . join ( ' ' ) ) ; if ( ! $original . prop ( 'disabled' ) ) { $outerWrapper . removeClass ( _this . classes . disabled ) . hover ( function ( ) { $ ( this ) . toggleClass ( _this . classes . hover ) ; } ) ; _this . options . openOnHover && $wrapper . on ( 'mouseenter' + bindSufix , _open ) ; $wrapper . on ( 'click' + bindSufix , function ( e ) { isOpen ? _close ( ) : _open ( e ) ; } ) ; $input . prop ( { tabindex : tabindex , disabled : false } ) . off ( ) . on ( { keypress : _handleSystemKeys , keydown : function ( e ) { _handleSystemKeys ( e ) ; clearTimeout ( _this . resetStr ) ; _this . resetStr = setTimeout ( function ( ) { $input . val ( '' ) ; } , _this . options . keySearchTimeout ) ; var key = e . keyCode || e . which ; if ( key > 36 && key < 41 ) _select ( _utils [ ( key < 39 ? 'previous' : 'next' ) + 'EnabledItem' ] ( _this . items , selected ) ) ; } , focusin : function ( e ) { $input . one ( 'blur' , function ( ) { $input . blur ( ) ; } ) ; isOpen || _open ( e ) ; } } ) . on ( 'oninput' in $input [ 0 ] ? 'input' : 'keyup' , function ( ) { if ( $input . val ( ) . length ) { $ . each ( _this . items , function ( i , elm ) { if ( RegExp ( '^' + $input . val ( ) , 'i' ) . test ( elm . slug ) && ! elm . disabled ) { _select ( i ) ; return false ; } } ) ; } } ) ; $original . prop ( 'tabindex' , false ) ; $li = $ ( 'li' , $items . removeAttr ( 'style' ) ) . click ( function ( ) { _select ( $ ( this ) . index ( ) , true ) ; return false ; } ) ; } else { $outerWrapper . addClass ( _this . classes . disabled ) ; $input . prop ( 'disabled' , true ) ; } _utils . triggerCallback ( 'Init' , _this ) ; }
Generate options markup and event binds
Generate options markup and event binds
// Build options markup // Not disabled, so... Removing disabled class and bind hover // Click on label and :focus on original select will open the options box // Toggle open/close // Clear search // If it's a directional key // 37 => Left // 38 => Up // 39 => Right // 40 => Down // Stupid, but necessary... Prevent the flicker when // focusing out and back again in the browser window // Search in select options // Remove styles from items box // Fix incorrect height when refreshed is triggered with fewer options // The second parameter is to close the box after click // Chrome doesn't close options box if select is wrapped with a label // We need to 'return false' to avoid that