Select from JavaScript

Use new betterNiceSelect.BetterNiceSelect(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. It got typeahead autocomplete functionality too!

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 = new betterNiceSelect.BetterNiceSelect("#my-select");