@dotburo/select-input

SelectInput

Single-purpose select box/dropdown with an input field—without dependencies (ie11+).

›_ demo

Install with npm

npm i -D @dotburo/select-input

Usage

import SelectInput from 'select-input';

// Minimal parameters
let selectInput = new SelectInput('.select-input', {
    items: ['A', 'B', 'C', 'D']
});

// Listen to events, add a callback and show the list 
selectInput.on('selected', e => console.log(e.detail))
           .on('created', e => selectInput.getCurrent())
           .onDelete(item => window.confirm('Sure?'))
           .toggle(true);

Available options (and their defaults)

items: []                               # Array of strings/numbers or of {value: String|Number} objects
current: null                           # Item to select on instantiation
parent: null                            # Parent element, to 
maxHeight: 0                            # Maximum height of the dropdown, `0` means no constraint
allowAdd: true                          # Whether to allow adding new elements to the list
proposal: 'Add {X} to the list?'        # Message to add an item to the list, {X} will be replaced
notFound: '{X} not present in the list' # Message if nothing was found (only used if `allowAdd` is `false`)
sort: true                              # Whether to sort the list
order: 'desc'                           # Sort order
allowRemove: true                       # Whether to allow removal of items in the list
removalIcon: '×'                  # HTML for deletion button in each item li-element
placeHolder: 'Type to search'           # Input field place holder
onDelete: null                          # Callable, fired before deleting an item; return `false` to prevent deletion
onCreate: null                          # Callable, fired before creatng an item; return `false` to prevent creation

Events

• selected
• created
• removed

Event handlers can be bound with instance.on() or instance.getElement().addEventListener(). In browsers which support CustomEvent the detail property of the event object contains the created, selected or removed item. For older browsers instance.getCurrent() will need to be used.

Public methods

instance.on(event, fn, el = null): instance

Listen to events, pass in and event name (String), a subscriber (Function) and optionally and event target (Element). If the latter is omitted, events are delegated to instance.getElement().

instance.onDelete(fn): instance

Pass a function to be called before deleting an item. If the function returns false, the item will not be removed.

instance.onCreate(fn): instance

Pass a function to be called before creating an item. If the function returns false, the item will not be created.

instance.toggle(show = false): instance

Show or hide the list

instance.getElement(): HTMLElement

Return SelectInput's outermost element

instance.getItems(): array

Get all the items in the list as an array of objects

instance.getCurrent(): object

Return the currently selected item of the list

instance.setCurrent(string|undefined): object

Set or clear the current value (only existing values can be set)

instance.findItem(string|number): object

Find an item in the list by its value

instance.remove(): void

Unbind all events and clean up the DOM