Select Options

The Select Options API of Bootstrap-Nice-Select

Bootstrap Version

Because there are some changes in class names and layout between Bootstrap 4 and Bootstrap 5, bootstrap-nice-select needs to know the version of Bootstrap you are using. By default, bootstrap-nice-select automatically detects the version of Bootstrap. However, there are some instances where the version detection does not work properly (e.g. Bootstrap is being loaded asynchronously or there is a namespace collision). For now, bootstrap-nice-select does not default to using a specific Bootstrap formatting if version detection fails. Normally if the version detection fails, there is a problem on user side which should be fixed.

 

Default Settings

You can change the default settings for bootstrap-nice-select by modifying bootstrapNiceSelect.DEFAULTS object as example:

bootstrapNiceSelect.DEFAULTS.tags = true;

 

 

 

animation

  • Attribute: data-animation
  • Type: Boolean
  • Detail: Set to false if you do not want to have animation effects for the API methods show() and hide().
  • Default: true
  • Example: Animation

 

 

disabled

  • Attribute: disabled="disabled"
  • Type: String
  • Detail: You can disable the whole <select> component so you can not add or delete already selected <option> tags. You can also disable single <option> tags to add them and make them unremovable. Works with data-search-data - JSON format needs to be expanded with disabled: true as attribute for a single item. Default is disabled: false and does not need to be added.
  • Default: undefined
  • Example: From HTML

 

 

init

  • Attribute: data-bs-toggle
  • Type: String
  • Detail: Activate bootstrap-nice-select without writing JavaScript.
  • Default: 'bootstrap-nice-select'
  • Example: From HTML

 

 

icons

  • Attribute: icons
  • Type: Object
  • Detail: Set own custom icons via Javascript for the placeholder icons.
  • Default:
{
    search: '<i class="fa-solid fa-magnifying-glass"></i>',
    delete: '<i class="fa-solid fa-trash"></i>',
    add: '<i class="fa-solid fa-plus"></i>',
    tag: '<i class="fa-solid fa-circle-exclamation"></i>'
}

 

 

locale

  • Attribute: data-locale
  • Type: String
  • Detail: Sets the locale to use (i.e. 'de-DE'). Locale files currently all inside file and do not need to be pre-loaded. If left undefined, an empty string or a locale which is not allowed, errors are thrown.
  • Default: 'en-US'
  • Example: Locale

 

 

minimumInputLength

  • Attribute: data-minimum-input-length
  • Type: Number
  • Detail: Sets the minimum number of characters required to start a search. Default value of 0 will directly trigger a search on autofill popup search
  • Default: 0
  • Example: Minimum Input Length

 

 

scrollable

on

  • Attribute: data-scrollable-on
  • Type: Boolean
  • Detail: Set true to enable virtual scroll to display a virtual, “infinite” list. Needs data-scrollable-height to be set to work.
  • Default: false
  • Example: Scrollable

 

 

height

  • Attribute: data-scrollable-height
  • Type: String
  • Detail: Set a valid CSS height to display a virtual, “infinite” list. Needs data-scrollable-on to be set to work.
  • Default: undefined
  • Example: Scrollable

 

 

searchData

  • Attribute: data-search-data
  • Type: String | Function
  • Detail: Used to load the select field data for adding new items. The function needs to return elements in a specific JSON format to work properly.
  • Default: undefined
  • Example: Remote Data

 

 

tags

  • Attribute: data-tags
  • Type: Boolean
  • Detail: Set true to enable dynamic item creation on input search field with pressing “,”. The separators that should be used when tokenizing can be specified using the tokenSeparators option.
  • Default: false
  • Example: Tagging

 

 

tagsCheck

  • Attribute: data-tags-check
  • Type: String | Function
  • Detail: Used to add some logic to the select field to return a Boolean if an invalid value is entered.
  • Default: undefined
  • Example: Constraining Tag Creation

 

 

theme

 

 

tokenSeparators

  • Attribute: data-token-separators
  • Type: Array
  • Detail: The separators that should be used when tokenizing.
  • Default: [","]
  • Example: Token Separators