jQuery-Selectric: A JavaScript repository from rnicholls

#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.: á, ñ, ç...)

##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">▾</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

rnicholls/jQuery-Selectric