Multi-select Dropdown Picker With Vanilla JavaScript

Preview:

Description:

A vanilla JS dropdown picker for users to select one or more items from a predefined list. The user can also filter the list based on what they typed in the search field. Inspired by Filterable & Checkable Multi-Select Dropdown In JavaScript.

It has no dependencies and does not require jQuery. No images are used in this script. It’s as lightweight as possible, so it loads and runs fast!

How to use it:

1. Download and import the multi-select-dropdown.js library into the document.

<script src="multi-select-dropdown.js"></script>

2. That’s it. The library will automatically convert the existing multi selectbox into a dropdown picker.

<select multiple>
  <option value="Singapore">Singapore</option>
  <option value="Portland">Portland</option>
  <option value="Halifax">Halifax</option>
  <option value="London">London</option>
  <option value="Seattle">Seattle</option>
  <option value="Toronto">Toronto</option>
</select>

3. Create an empty container to hold the selected items.

<div id="dropdownSelected">
  <h2>Selected</h2>
</div>

3. Enable the live search functionality.

<select multiple search='true'>
  <option value="Singapore">Singapore</option>
  <option value="Portland">Portland</option>
  <option value="Halifax">Halifax</option>
  <option value="London">London</option>
  <option value="Seattle">Seattle</option>
  <option value="Toronto">Toronto</option>
</select>

Changelog:

07/11/2022

• Update default listitem margin