jQuery Selectric !icon

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 (for example: á, ñ, ç...)

$3

How to use:

Make sure to include jQuery in your page:

``html

`

Include jQuery Selectric:

`html

`

Include jQuery Selectric styles, and change it to your taste :D _(please refer to our demo page for more themes and other customizations)_

`html

`

Initialize jQuery Selectric:

`html

`

Options:

You can pass an options object as the first parameter when you call the plugin. For example:
`js
$('select').selectric({
maxHeight: 200
});
`

`js
{
/*
* Type: Function
* Description: Function called before plugin initialize
*/
onBeforeInit: function() {},

/*
* Type: Function
* Description: Function called plugin has been fully initialized
*/
onInit: function() {},

/*
* Type: Function
* Description: Function called before select options opens
*/
onBeforeOpen: function() {},

/*
* Type: Function
* Description: Function called after select options opens
*/
onOpen: function() {},

/*
* Type: Function
* Description: Function called before select options closes
*/
onBeforeClose: function() {},

/*
* Type: Function
* Description: Function called after select options closes
*/
onClose: function() {},

/*
* Type: Function
* Description: Function called before select options change
*/
onBeforeChange: function() {},

/*
* Type: Function
* Description: Function called when select options change
*/
onChange: function(element) {
$(element).change();
},

/*
* Type: Function
* Description: Function called when the Selectric is refreshed
*/
onRefresh: function() {},

/*
* Type: Integer
* Description: Maximum height options box can be
*/
maxHeight: 300,

/*
* Type: Integer
* Description: After this time without pressing
* any key, the search string is reset
*/
keySearchTimeout: 500,

/*
* Type: String [HTML]
* Description: Markup for open options button
*/
arrowButtonMarkup: '<b class="button">&#x25be;</b>',

/*
* Type: Boolean
* Description: Initialize plugin on mobile browsers
*/
disableOnMobile: false,

/*
* Type: Boolean
* Description: Open select box on hover, instead of click
*/
openOnHover: false,

/*
* Type: Integer
* Description: Timeout to close options box after mouse leave plugin area
*/
hoverIntentTimeout: 500,

/*
* Type: Boolean
* Description: Expand options box past wrapper
*/
expandToItemText: false,

/*
* Type: Boolean
* Description: The select element become responsive
*/
responsive: false,

/*
* Type: Object
* Description: Customize classes.
*/
customClass: {
prefix: 'selectric', // Type: String. Description: Prefixed string of every class name.
camelCase: false // Type: Boolean. Description: Switch classes style between camelCase or dash-case.
},

/*
* Type: String or Function
* Description: Define how each option should be rendered inside its