This package has been deprecated in favor of better-nice-select. Please consider migrating to better-nice-select for continued support and updates: https://www.npmjs.com/package/better-nice-select

Select from JavaScript

Use bootstrapNiceSelect.BootstrapNiceSelect(selector, options) to initialize the select field data. To size the created select field, wrap it with a <div> tag and set the width and height CSS style of it.

The overlay which will be shown when clicked on the add icon is keyboard navigable with the Tab key to switch between the input and the first founded option. In addition, the Arrow keys can be used to navigate through the founded options, when you want to add it to the list.

Possible options to search for are: Banana, Apple, Orange, Lemon, Pepper, Mushrooms, Cabbages, Celery, Brocoli, Garlic

<div class="container">
    <select id="my-select" multiple="multiple">
      <option value="Banana">Banana</option>
      <option value="Apple">Apple</option>
      <option value="Orange">Orange</option>
      <option value="Lemon" selected="selected">Lemon</option>
      <option value="Pepper">Pepper</option>
      <option value="Mushrooms">Mushrooms</option>
      <option value="Cabbages">Cabbages</option>
      <option value="Celery">Celery</option>
      <option value="Garlic">Garlic</option>
      <option value="Brocoli">Brocoli</option>
    </select>
</div>

let select = bootstrapNiceSelect.BootstrapNiceSelect("#my-select");