All Projects → Mobius1 → Selectr

Mobius1 / Selectr

Licence: mit
A lightweight, vanilla javascript select box replacement. No dependencies.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Selectr

Vanillajs Spa
a simple SPA in vanilla js
Stars: ✭ 265 (-9.56%)
Mutual labels:  vanilla-js, vanilla-javascript
bs-breakpoints
A plugin which detect Bootstrap 4 breakpoints and emit when there is a change
Stars: ✭ 22 (-92.49%)
Mutual labels:  vanilla-javascript, vanilla-js
mm-components
Music Markups components
Stars: ✭ 50 (-82.94%)
Mutual labels:  vanilla-javascript, vanilla-js
eins-modal
Simple to use modal / alert / dialog / popup. Created with pure JS. No javascript knowledge required! Works on every browser and device! IE9
Stars: ✭ 30 (-89.76%)
Mutual labels:  vanilla-javascript, vanilla-js
spider-covid-19-viz-3d
Speedy access to the latest, local COVID-19 data with a familiar interface: the Globe
Stars: ✭ 19 (-93.52%)
Mutual labels:  vanilla-javascript, vanilla-js
event-driven-web-components-realworld-example-app
Exemplary real world application built with Vanilla JS Web Components in an Event Driven Architecture
Stars: ✭ 55 (-81.23%)
Mutual labels:  vanilla-javascript, vanilla-js
periodic-table.io
periodic-table.io
Stars: ✭ 37 (-87.37%)
Mutual labels:  vanilla-javascript, vanilla-js
js-plugin-starter-kit
VanillaJS (pure JavaScript) plugin starter with Webpack 4 and Babel 7.
Stars: ✭ 100 (-65.87%)
Mutual labels:  vanilla-javascript, vanilla-js
Bs Stepper
A stepper for Bootstrap 4.x
Stars: ✭ 261 (-10.92%)
Mutual labels:  vanilla-js, vanilla-javascript
tabbis.js
Pure vanilla javascript tabs with nesting
Stars: ✭ 44 (-84.98%)
Mutual labels:  vanilla-javascript, vanilla-js
tensorflowjs-remove-background
Remove Background from the picture using WebAssembly & TensorFlow.js
Stars: ✭ 79 (-73.04%)
Mutual labels:  vanilla-javascript, vanilla-js
svelecte
Selectize-like component written in Svelte, also usable as custom-element 💪⚡
Stars: ✭ 121 (-58.7%)
Mutual labels:  select, tagging
coding challenge-14
Understanding JavaScript and coding without the help of a library or tool
Stars: ✭ 22 (-92.49%)
Mutual labels:  vanilla-javascript, vanilla-js
pAppwords
Vanilla JS plug-in with zero configuration integrate with HaveIBeenPwned API v2
Stars: ✭ 21 (-92.83%)
Mutual labels:  vanilla-javascript, vanilla-js
curved-menu
VanillaJS fully configurable curved menu (circular navigation)
Stars: ✭ 30 (-89.76%)
Mutual labels:  vanilla-javascript, vanilla-js
tablist
WAI-ARIA tab plugin without dependencies.
Stars: ✭ 21 (-92.83%)
Mutual labels:  vanilla-javascript, vanilla-js
Slim Select
Slim advanced select dropdown
Stars: ✭ 517 (+76.45%)
Mutual labels:  select, vanilla-javascript
Selectize.js
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Stars: ✭ 12,744 (+4249.49%)
Mutual labels:  tagging, select
vanilla-js-drawer
A dependency-free Vanilla JS drawer. No dependencies, no automation build tools.
Stars: ✭ 20 (-93.17%)
Mutual labels:  vanilla-javascript, vanilla-js
vanillajs-hello
Start a VanillaJS website using WebPack in just 30 seconds: HTML,CSS,Babel,SASS,Bootstrap,Prettier,Gitpod
Stars: ✭ 24 (-91.81%)
Mutual labels:  vanilla-javascript, vanilla-js

Selectr

npm npm version license Average time to resolve an issue Percentage of issues still open

NO LONGER UNDER ACTIVE DEVELOPMENT. If you would like to take over development please contact me and I'll transfer ownership.

A lightweight, dependency-free, mobile-friendly select box replacement written in vanilla javascript. Just 6.5KB minified and gzipped. Similar to Select2 and Chosen, but without the dependencies.

Supports most modern mobile and desktop browsers including IE9.

Don't forget to check the wiki out and view some demos.

Pull requests accepted!


Features:

  • Supports single and multiple select boxes
  • Supports optgroups
  • Custom datasets
  • Searchable options
  • Tagging support
  • Custom events
  • Custom styling
  • Native select UI for mobile devices
  • Dynamically add options
  • Much more...

Documentation | Demo


Install

bower

bower install mobius1-selectr --save

npm

npm install mobius1-selectr --save

Browser

Grab the files from one of the CDNs and include them in your page:

<link href="https://unpkg.com/[email protected]/dist/selectr.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/[email protected]/dist/selectr.min.js" type="text/javascript"></script>

//or

<link href="https://cdn.jsdelivr.net/gh/mobius1/[email protected]/dist/selectr.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/mobius1/[email protected]/dist/selectr.min.js" type="text/javascript"></script>

You can replace latest with the required release number if needed.

CDNs courtesy of unpkg and jsDelivr


Initialisation

HTML

Start with a standard select box you want to convert:

<select id="mySelect">
	<option value="value-1">Value 1</option>
	<option value="value-2">Value 2</option>
	<option value="value-3">Value 3</option>
	...
</select>

Javascript

You can then instantiate Selectr by passing a reference to your select box as the first parameter as either a DOM node or a CSS3 selector string:

new Selectr(document.getElementById('mySelect'));

// or

new Selectr('#mySelect');

Selectr accepts the options object as a second parameter:

new Selectr('#mySelect', {
	searchable: false,
	width: 300
});

Contributors


If this project helps you then you can grab me a coffee or beer to say thanks.

paypal


License

Copyright 2016 Karl Saunders

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].