How do I mimic keyboard behavior in my styled select dropdown?

Question

I’m using jQuery 1.11. I want to style my select drop-downs because, let’s face it, the default looks sucks. So I found some styles

.selectMenu {
  font-family: 'Oxygen', sans-serif;
  font-size: 20px;
  height: 50px;
  -webkit-appearance: menulist-button;
}

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 42px;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
  padding: 11px 12px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}
.select-styled:hover {
  background-color: #7b7b7b;
}
.select-styled:active, .select-styled.active {
  background-color: #737373;
}
.select-styled:active:after, .select-styled.active:after {
  top: 9px;
  border-color: transparent transparent #fff transparent;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #737373;
  overflow: scroll;
}
.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}
.select-options li:hover {
  color: gray;
  background: #fff;
}
.select-options li[rel="hide"] {
  display: none;
}

ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}

and added this jQuery

$(function() {

        $('select').each(function(){
            styleSelectMenu($(this));
        });

});

// This method applies the styles to our select menu
function styleSelectMenu(selectMenu)
{
    var $this = $(selectMenu), numberOfOptions = $(selectMenu).children('option').length;

                /*** NEW - start ***/
                var $paddingCalculator = $('<div />', {
                'class' : "select-styled test"
    }).css({
                width : 0,
        visibility : "hidden"
    }).appendTo("body");
    $this.addClass('select-hidden');
    var paddingWidth = $paddingCalculator.outerWidth() + 10;
    $paddingCalculator.remove();

    //var selectWidth = $this.width() + paddingWidth;
    var selectWidth = $this.outerWidth() + paddingWidth;
    //alert(selectWidth);

    if ( !$this.parent().hasClass('select') ) {
                var $wrapper = $("<div />", {
                        'class' : "select"
        }).css({
                        width   : selectWidth
        });
        $this.wrap( $wrapper );
    }   // if

                /*** NEW - end ***/

    if ( !$this.next().hasClass('select-styled') ) {
        $this.after('<div class="select-styled"></div>');
    }    // if

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    if ( $styledSelect.parent().find('ul').length > 0 ) {
        $styledSelect.parent().find('ul').remove();
    }   // if
    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    // This is the event when someone opens the list
    $styledSelect.unbind('click')
    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').each(function(){
            $(this).removeClass('active').next('ul.select-options').hide();
        });
        $(this).toggleClass('active').next('ul.select-options').toggle();
    });

    // This is the event when someone actually selects something from the list
    $listItems.unbind('click.selectStyledItem')
    $listItems.bind('click.selectStyledItem', function(event) {
         clickListItem(event, $styledSelect, $this, $(this), $list);
    });

    $(document).click(function(event) {
        $styledSelect.removeClass('active');
        $list.hide();
    });


    var selectedIndex = $this[0].selectedIndex;
    if (selectedIndex > 0) {
        var name = $this.attr("name")
        var selectedText = $( "select[name='" + name + "'] option:selected" ).text();
        selectItemFromStyledList($styledSelect, $this, selectedText, $list);
    }   // if

}

// This is the method that will select an item from the styled list
function selectItemFromStyledList(styledSelect, selectMenu, selectedText, listToHide)
{
    $(styledSelect).text(selectedText).removeClass('active');
    $(selectMenu).val($(selectMenu).attr('rel'));
    $(listToHide).hide();
    // Select option in the underlying list so that the form gets submitted
    // with the right values
    selectedOption = $(selectMenu).find("option").filter(function () { return $(this).html() == selectedText; });
    $(selectMenu).find("option[selected='selected']").removeAttr("selected");
    $(selectedOption).attr("selected","selected");
}       // selectItemFromStyledList

function clickListItem(event, styledSelect, selectMenu, listItemClicked, list)
{
        var $styledSelect = $(styledSelect);
        var $selectMenu = $(selectMenu);
        var $listItem = $(listItemClicked);
        var $list = $(list);

        event.stopPropagation();
        var selectedText = $listItem.text();
        selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list)
 }       // clickListItem

The Fiddle illustrating this is here — http://jsfiddle.net/cwzjL2uw/1/ . The issue is, although I have achieved the style, I have failed to replicate the keyboard behavior that a normal select menu has. My question is, how can I make my menu behave such that when I click the letter “A,” the first “A” item is selected (in this case “Alabama”), just like a regular select menu behaves.

Answer 1

You could use jQuery UI's selectmenu widget, and style it to your liking. Since it already includes keyboard handling, you would only have to worry about styling.

$(function () {
  $('select').selectmenu();
});

.ui-selectmenu-button
{
  background: gray !important;
  padding: 0.4em 0.8em !important;
}
.ui-selectmenu-button *
{ 
  font-family: Verdana;
  font-size: 12px;
  color: white !important;
}
.ui-menu-item
{ 
  font-family: Verdana;
  font-size: 12px;
  background: gray;
  color: white;
}
.ui-selectmenu-menu ul
{
  max-height: 170px;
}
/* Using base64 version of white down arrow */
.ui-icon {
  background-image: url('data:image/png;base64,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')!important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<select name="user[address_attributes][state_id]" id="user_address_attributes_state_id">
  <option value="">Select State</option>
  <option value="3526">Alabama</option>
  <option value="3556">Alaska</option>
  <option value="3547">Arizona</option>
  <option value="3510">Arkansas</option>
  <option value="3542">California</option>
  <option value="3543">Colorado</option>
  <option value="3527">Connecticut</option>
  <option value="3512">Delaware</option>
  <option value="3513">Florida</option>
  <option value="3514">Georgia</option>
  <option value="3555">Hawaii</option>
  <option value="3548">Idaho</option>
  <option value="3529">Illinois</option>
  <option value="3530">Indiana</option>
  <option value="3528">Iowa</option>
  <option value="3515">Kansas</option>
  <option value="3557">Kentucky</option>
  <option value="3516">Louisiana</option>
  <option value="3531">Maine</option>
  <option value="3517">Maryland</option>
  <option value="3558">Massachusetts</option>
  <option value="3532">Michigan</option>
  <option value="3533">Minnesota</option>
  <option value="3519">Mississippi</option>
  <option value="3518">Missouri</option>
  <option value="3549">Montana</option>
  <option value="3534">Nebraska</option>
  <option value="3545">Nevada</option>
  <option value="3535">New Hampshire</option>
  <option value="3536">New Jersey</option>
  <option value="3544">New Mexico</option>
  <option value="3537">New York</option>
  <option value="3520">North Carolina</option>
  <option value="3550">North Dakota</option>
  <option value="3538">Ohio</option>
  <option value="3521">Oklahoma</option>
  <option value="3551">Oregon</option>
  <option value="3559">Pennsylvania</option>
  <option value="3539">Rhode Island</option>
  <option value="3522">South Carolina</option>
  <option value="3552">South Dakota</option>
  <option value="3523">Tennessee</option>
  <option value="3524">Texas</option>
  <option value="3546">Utah</option>
  <option value="3540">Vermont</option>
  <option value="3560">Virginia</option>
  <option value="3553">Washington</option>
  <option value="3511">Washington, D.C.</option>
  <option value="3525">West Virginia</option>
  <option value="3541">Wisconsin</option>
  <option value="3554">Wyoming</option>
</select>