https://github.com/bluzky/nice-select2

A lightweight vanilla javascript library that replaces native select elements with customizable dropdowns
https://github.com/bluzky/nice-select2

nice-select nice-select2 select select2 vanilla-javascript

Last synced: 5 days ago
JSON representation

A lightweight vanilla javascript library that replaces native select elements with customizable dropdowns

• Host: GitHub
• URL: https://github.com/bluzky/nice-select2
• Owner: bluzky
• License: mit
• Created: 2019-07-13T08:34:49.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-11T21:34:30.000Z (over 1 year ago)
• Last Synced: 2024-04-14T09:44:42.890Z (9 months ago)
• Topics: nice-select, nice-select2, select, select2, vanilla-javascript
• Language: JavaScript
• Homepage: https://bluzky.github.io/nice-select2/
• Size: 544 KB
• Stars: 318
• Watchers: 4
• Forks: 56
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Nice Select

A lightweight Vanilla JavaScript plugin that replaces native select elements with customizable dropdowns.

## Install

```

npm i nice-select2

```

## Usage

Include nice-select2 script.

```html

```

Include the styles, either the compiled CSS...

```html

```

Or import nice-select2 using ES6 syntax

```js

import NiceSelect from "nice-select2";

```

```scss

@import "~nice-select2/dist/css/nice-select2.css";

// or

@import "~nice-select2/src/scss/nice-select2.scss";

```

Finally, initialize the plugin.

Using the minimified file directly:

```javascript

NiceSelect.bind(document.getElementById("a-select"), {searchable: true, placeholder: 'select', searchtext: 'zoek', selectedtext: 'geselecteerd'});

```

Using as import in webpack:

```javascript

new NiceSelect(document.getElementById("a-select"), {searchable: true});

```

## Instance method

- `update()` : update nice-select items to match with source select

- `focus()`: open dropdown list and focus on the search box if search is enabled

- `disable()`: disable select

- `enable()`: enable select

- `destroy()`: destroy NiceSelect2 instance

- `clear()`: clear all selected options

Full documentation and examples at [https://bluzky.github.io/nice-select2/](https://bluzky.github.io/nice-select2/).