[![JS.ORG](https://img.shields.io/badge/js.org-selectric-ffb400.svg)](http://js.org) [![Travis](https://img.shields.io/travis/lcdsantos/jQuery-Selectric.svg)](https://travis-ci.org/lcdsantos/jQuery-Selectric) [![codecov.io](https://codecov.io/github/lcdsantos/jQuery-Selectric/coverage.svg?branch=master)](https://codecov.io/github/lcdsantos/jQuery-Selectric?branch=master) [![npm](https://img.shields.io/npm/v/selectric.svg)](https://www.npmjs.com/package/selectric) # jQuery Selectric ![icon](http://i.imgur.com/D2hcnUN.png) 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](http://lcdsantos.github.io/jQuery-Selectric/) ## 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](http://lcdsantos.github.io/jQuery-Selectric/demo.html) 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">▾</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

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-before-highlight`	Fired before a select option is highlighted
`selectric-highlight`	Fired when a select option is highlighted
`selectric-before-select`	Fired before a select option is selected
`selectric-select`	Fired before a select option is selected
`selectric-before-change`	Fired before select options change
`selectric-change`	Fired when select options change
`selectric-refresh`	Fired when the Selectric is refreshed

	Stars	Issues	Version	Updated	Created
chosen-js	21,885	312	1.8.7	6 years ago	8 years ago
selectize	13,017	45	0.12.6	6 years ago	9 years ago
selectric	726	64	1.13.0	7 years ago	9 years ago
vanilla-select	16	8	1.0.25	4 years ago	7 years ago

chosen-js vs selectize vs selectric vs vanilla-select

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past