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: á, ñ, ç...)
Demo
How to use:
Install via NPM:
npm install selectric
Make sure to include jQuery in your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Include jQuery Selectric:
<script src="js/jquery.selectric.min.js"></script>
Include jQuery Selectric styles, and change it to your taste :D (please refer to our demo page for more themes and other customizations)
<link rel="stylesheet" href="selectric.css">
Initialize jQuery Selectric:
<script> $(function() { $('select').selectric(); }); </script>
Options:
You can pass an options object as the first parameter when you call the plugin. For example:
$('select').selectric({ maxHeight: 200 });
"{
/*
* 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">▾</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 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', 'index'.
*
* If it's a function, it will be called with the following parameter:
* (itemData). The function must return a string. If available all keys
* will be replaced by the respective values in itemData.
*
* itemData