Easy Customization Of HTML Select Boxes – nice-select2

Category: Form , Javascript | December 27, 2021
Author:bluzky
Views Total:767 views
Official Page:Go to website
Last Update:December 27, 2021
License:MIT

Preview:

Easy Customization Of HTML Select Boxes – nice-select2

Description:

A pretty nice select box replacement library that converts the regular select element into an animated, customizable, searchable dropdown list.

How to use it:

1. Import the nice-select2 plugin’s JavaScript and Stylesheet into the document.

<link href="dist/css/nice-select2.css" rel="stylesheet" />
<script src="dist/js/nice-select2.js"></script>
// OR 
# NPM
$ npm i nice-select2
import NiceSelect from "nice-select2";
@import "~nice-select2/dist/css/nice-select2.css"

2. Just attach the function NiceSelect to the existing select element and done.

<select id="example">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
NiceSelect.bind(document.getElementById("example"));

3. Enable/disable the searchable functionality. Default: false (disable).

NiceSelect.bind(document.getElementById("example"),{
  searchable: true
});

4. API methods.

instance.update();
instance.focus();
instance.enable();
instance.disable();
instance.clear();
instance.destroy();

Changelog:

v2.0.0 (12/27/2021)

  • This release makes it possible to include nice-select2 in your webpack import

12/22/2021

  • update

10/12/2021

  • update

10/10/2021

  • clean dependency

09/25/2021

  • JS updated

You Might Be Interested In:


Leave a Reply