Dropulous

Fabulous dropdowns for your forms.

Dropulous is a dependency-free JavaScript library that turns <select> and <input> elements into fully-featured dropdown controls.

Full documentation: https://dropulous.readthedocs.io

Features:

• live search
• load options from an API
• support multiple selections
• tag mode (custom value entry)
• custom HTML options
• fully accessible progressive enhancement

Quick start

Install

Either load it from the unpkg CDN:

<link rel="stylesheet" href="https://unpkg.com/dropulous/dist/dropulous.css">
<script src="https://unpkg.com/dropulous"></script>

or download the latest production-ready files from GitHub Releases and include them directly:

<link rel="stylesheet" href="dropulous.css">
<script src="dropulous.js"></script>

or install from npm:

npm install dropulous

import 'dropulous/css';
import Dropulous from 'dropulous';

new Dropulous(document.getElementById('my-field'));

or if you use Django, take a look at django-dropulous.

Configure

Initialise on any select or input form field:

<select id="my-field">
  <option value="one">One</option>
  <option value="two" selected>Two</option>
  <option value="three">Three</option>
</select>

<script>
  dropulous(document.getElementById('my-field'));
</script>

or set the data-dropulous attribute and it will automatically be initialised on page load:

<select data-dropulous data-source="/api/options/">
</select>