Simple Selector

Simple Selector is an es6 class used to create easily styleable select input. Simple Selector will create an HTML template that visually takes the place of your standard select tag.

Installation

npm i simple-selector
yarn add simple-selector

Note: Version 2.0.0+ includes breaking changes. You will need to update your working environment to reflect this update, or continue using the latest 1.5.0 release.

npm i [email protected]

Usage

<select name="my-select" id="MySelect" class="js-select">
	<option value="1">View All</option>
	<option value="2">Option 1</option>
	<option value="3">Option 2</option>
</select>

import SimpleSelector from 'simple-selector';

const select = document.querySelector('.js-select');

const Selector = new SimpleSelector(select, {
    placeholder: 'Select your favourite.',
});

Options

| Option | Type | Description | |--------|------|-------------| | search | Boolean or String (default: 'Search') | True / False to enable / disable String will be true and change the placeholder text. | | class | String (default: 'selector') | If you want more than one style of selector, you can change this class to suit your needs | | placeholder | String (default: placeholder attribute or 'Select') | Will update the default text on the Simple Selector | | autoClose | Boolean (default: true) | When multiple is false, autoClose: true will close the Selector when an option is clicked | | taglist | Boolean (default: false) | When multiple is true, taglist: true will display the selected options as tags in the select header |

Methods

The majority of the SimpleSelector functionality should happen automatically, although you may need to take control manually on some occations.

Update the options dynamically

If the options in the default select have been updated dynamically, simply call the reinit() method. You may also optionally need to call the update() method

SimpleSelector.reinit();
SimpleSelector.update();

Callbacks

Each of the following methods has a callback. These can be used with the on() method

• reinit
• update
• open
• close
• filter

SimpleSelector.on('update', (selector) => {
    console.log('selector updated!');
});

SCSS Mixin - defaults

.selector {
  @include simple-selector (
    $min-width: 32rem,
    $border-radius: 0,
    $border-width: .1rem,

    $header-color: $black,
    $header-border-color: rgba($black, .2),
    $header-background-color: $white,
    $header-padding: 1rem 4rem 1rem 2rem,

    $chevron-color: $black,

    $list-border-color: rgba($black, .2),
    $list-background-color: $white,
    $list-padding: 0,

    $search-color: $black,
    $search-border-color: rgba($black, .2),
    $search-background-color: $white,

    $option-color: $black,
    $option-background-color: $white,
    $option-transition-speed: 0.3s,

    $option-color--hover: $black,
    $option-background-color--hover: rgba($black, .1),

    $option-color--active: $white,
    $option-background-color--active: rgba($black, .6),
  )
}

Browser Support

Desktop: Firefox 16+ ✓ Chrome 15+ ✓ Safari 5.1+ ✓ IE 10+ ✓

Mobile: Safari iOS 5.1+ ✓ Chrome Mobile 47+ ✓

Note: (Might work on earlier versions of chrome, but I couldn't test it.)

License

MIT