Advanced Select Boxes For Bootstrap 5 With use-bootstrap-select

Category: Form , Javascript | November 20, 2024
Author:use-bootstrap
Views Total:1,925 views
Official Page:Go to website
Last Update:November 20, 2024
License:MIT

Preview:

Advanced Select Boxes For Bootstrap 5 With use-bootstrap-select

Description:

use-bootstrap-select is a JavaScript plugin that enhances standard select elements with customizable features using the native Bootstrap 5 dropdown component.

Features:

  • Display selections as tag-style pills.
  • Searchable, filterable, and clearable options.
  • Add new options to the regular select box.
  • Customize sizing and proportions.
  • Validate forms and reflect states.
  • Work with single or multi-selects.

How to use it:

1. Download and load the use-bootstrap-select’s files into your Bootstrap 5 project.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- use-bootstrap-select -->
<link rel="stylesheet" href="use-bootstrap-select.min.css" />
<script src="use-bootstrap-select.min.js"></script>

2. Initialize the plugin on your select element.

<select class="form-select" id="example">
  ... options here
</select>
const example = new UseBootstrapSelect(document.getElementById('example'))

3. Config the plugin with the following data attributes:

  • data-clearable: Display a close icon to clear selections
  • data-searchable: Enable a search field to filter through options
  • data-creatable: Allows users to add more options to the select
  • data-max-height: Specify the max height of the dropdown
  • data-search-placeholder: Placeholder for the search field
  • data-no-results-text: Text to display when no results
  • data-creatable-text: ‘Add <b>{value}</b>…’
  • data-position: ‘up’ or ‘down’
<select 
  class="form-select" 
  id="example"
  data-clearable="true" 
  data-searchable="true"
  data-creatable="true"
  data-max-height="15rem">
  ... options here
</select>

4. API methods.

// show the dropdown
example.show();
// hide the dropdown
example.hide();
// toggle the dropdown
example.toggle();
// set value(s)
example.setValue('chrome');
example.setValue(['chrome', 'opera']);
// remove value(s)
example.removeValue('chrome');
example.removeValue(['chrome', 'opera']);
// add vaule(s)
example.addValue('chrome');
example.addValue(['chrome', 'opera']);
// add option(s)
// addOption(value, text, selected, position)
example.addOption('safari', 'Safari', true, 'last')
// get selections
example.getValue();
// clear value(s)
example.clearValue();
// update the instance
example.update();
// select element
example.selectElement();
// clear all
example.clearAll();

Changelog:

v2.2.1 (11/20/2024)

  • Fix search entry is not removed with multiple selection.

v2.2.0 (06/17/2024)

  • Added a method: clearAll

v2.1.1 (05/02/2024)

  • Fix show method not focusing on input.

v2.1.0 (04/30/2024)

  • Added new methods: show, hide, and toggle.

v2.0.0 (04/04/2024)

  • Now initialization must be done using classes instead of functions. (e.g., new UseBootstrap(target) instead of UseBootstrap(target)).
  • Configuration attribute has been changed from “data-ub-select-[config]” to “data-[config]”. (e.g., data-clearable=”true” instead of data-ub-select-clear).
  • The use-bootstrap-select now works without Bootstrap JavaScript.
  • The dropdown menu position is now static, you can configure it to be shown on the down or up.
  • Added several new methods.

v1.1.0 (03/09/2024)

  • Added options: data-ub-select-search-placeholder; data-ub-select-no-results-text; data-ub-select-creatable-text

v1.0.1 (11/16/2023)

  • Bugfix

v1.0.0 (08/08/2023)

  • Refactor project to use function-based implementation UseBootstrapSelect() instead of class-based instantiation new UseBootstrapSelect()
  • Reduced file size

You Might Be Interested In:


Leave a Reply