#jQuery Selectric

jQuery Selectric is a jQuery plugin designed to help at stylizing and manipulating HTML selects.

• Keyboard navigation (Up/Down/Left/Right/Word search)
• Easily customizable
• Pretty lightweight
• Options box always stay visible
• Doesn't rely on external libraries (besides jQuery)
• Word search works with western latin characters set (e.g.: á, ñ, ç...)

###Demo

##How to use:

Make sure to include jQuery in your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Include jQuery Selectric:

<script src="js/jquery.selectric.min.js"></script>

Put styles in your CSS and change it to your taste :D

/*======================================================================
  Selectric
======================================================================*/
.selectricWrapper {
  position: relative;
  margin: 0 0 10px;
  width: 300px;
  cursor: pointer;
}

.selectricResponsive {
  width: 100%;
}

.selectric {
  border: 1px solid #DDD;
  background: #F8F8F8;
  position: relative;
  border-radius: 2px;
}
.selectric .label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 30px 0 0;
  padding: 6px;
  font-size: 12px;
  line-height: 18px;
  color: #444;
  min-height: 18px;
}
.selectric .button {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  color: #BBB;
  text-align: center;
  font: 0/0 a;
  /* IE Fix */
  *font: 20px/30px Lucida Sans Unicode, Arial Unicode MS, Arial;
}
.selectric .button:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: #BBB;
  border-bottom: none;
}

.selectricHover .selectric {
  border-color: #CCC;
}
.selectricHover .selectric .button {
  color: #888;
}
.selectricHover .selectric .button:after {
  border-top-color: #888;
}

.selectricOpen {
  z-index: 9999;
}
.selectricOpen .selectric {
  border-color: #CCC;
  background: #F0F0F0;
}
.selectricOpen .selectricItems {
  display: block;
}

.selectricDisabled {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.selectricHideSelect {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;
}
.selectricHideSelect select {
  position: absolute;
  left: -100%;
  display: none;
}

.selectricInput {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: none !important;
  border: none !important;
  *font: 0/0 a !important;
  background: none !important;
}

.selectricTempShow {
  position: absolute !important;
  visibility: hidden !important;
  display: block !important;
}

/* Items box */
.selectricItems {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #F9F9F9;
  border: 1px solid #CCC;
  z-index: -1;
  box-shadow: 0 0 10px -6px;
}
.selectricItems .selectricScroll {
  height: 100%;
  overflow: auto;
}
.selectricAbove .selectricItems {
  top: auto;
  bottom: 100%;
}
.selectricItems ul, .selectricItems li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  min-height: 20px;
}
.selectricItems li {
  display: block;
  padding: 5px;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #EEE;
  color: #666;
  cursor: pointer;
}
.selectricItems li.selected {
  background: #EFEFEF;
  color: #444;
  border-top-color: #E0E0E0;
}
.selectricItems li:hover {
  background: #F0F0F0;
  color: #444;
}
.selectricItems li.disabled {
  background: #F5F5F5;
  color: #BBB;
  border-top-color: #FAFAFA;
  cursor: default;
}

Initialize jQuery Selectric:

<script>
$(function(){
  $('select').selectric();
});
</script>

##Options:

Option	Default	Type	Description
onBeforeInit	function(element) {}	Function	Function called before plugin initialize
onInit	function(element) {}	Function	Function called plugin has been fully initialized
onBeforeOpen	function(element) {}	Function	Function called before select options opens
onOpen	function(element) {}	Function	Function called after select options opens
onBeforeClose	function(element) {}	Function	Function called before select options closes
onClose	function(element) {}	Function	Function called after select options closes
onChange	function(element) {   $(element).change(); }	Function	Function called when select options change
onRefresh	function(element) {}	Function	Function called when the Selectric is refreshed
maxHeight	300	Integer	Maximum height options box can be
keySearchTimeout	500	Integer	After this time without pressing any key, the search string is reset
arrowButtonMarkup	<b class="button">&#9662;</b>	String [HTML]	Markup for open options button
disableOnMobile	true	Boolean	Initialize plugin on mobile browsers
openOnHover	false	Boolean	Open select box on hover, instead of click
expandToItemText	false	Boolean	Expand options box past wrapper
responsive	false	Boolean	The select element become responsive
customClass	{   prefix: 'selectric',   postfixes: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive',   camelCase: true }	Object	Custom classes. Every class in 'postfixes' should be separate with a space and follow this exact order: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive'
optionsItemBuilder	'{text}'	String or Function	Define how each option should be rendered inside its <li> element. If it's a string, all keys wrapped in brackets will be replaced by the respective values in itemData. Available keys are: 'value', 'text', 'slug', 'disabled'. If it's a function, it will be called with the following parameters: (itemData, element, index). The function must return a string, no keys will be replaced in this method.</td>
preventWindowScroll	true	Boolean	Prevent scroll on window when using mouse wheel inside options box to match common browsers behavior.
inheritOriginalWidth	false	Boolean	Inherit width from original element

##Events

All events are called on original element, first argument is the original element too. And can be bound like this:

$('select').on('selectric-eventname', function(element){
  // your code
});

eventname can be one of the following:

Event name	Description
selectric-before-init	Fired before plugin initialize
selectric-init	Fired plugin has been fully initialized
selectric-before-open	Fired before select options opens
selectric-open	Fired after select options opens
selectric-before-close	Fired before select options closes
selectric-close	Fired after select options closes
selectric-change	Fired when select options change
selectric-refresh	Fired when the Selectric is refreshed

##Public methods:

var Selectric = $('select').data('selectric');

Selectric.open();    // Open options
Selectric.close();   // Close options
Selectric.destroy(); // Destroy select and go back to normal
Selectric.refresh(); // Reconstruct the plugin options box
Selectric.init();    // Reinitialize the plugin

// Or...
$('select').selectric('open');    // Open options
$('select').selectric('close');   // Close options
$('select').selectric('destroy'); // Destroy select and go back to normal
$('select').selectric('refresh'); // Reconstruct the plugin options box
$('select').selectric('init');    // Reinitialize the plugin

##Browser support:

• Firefox
• Chrome
• Safari
• Internet Explorer 7+
• Opera