A component that provides a more user-friendly method of doing multi selects.
multi.js is a user-friendly replacement for select boxes with the multiple attribute. It is mobile-friendly, easy to use, and provides search functionality. multi.js is also easy to customize and style with CSS.
Yarn:
yarn add searchable-multi
Bower:
bower install matthewp/searchable-multi --save
Simply nest a <select multiple>
inside of the searchable-multi tag:
<searchable-multi placeholder="Search fruits...">
<select multiple>
<option>Apple</option>
<option>Banana</option>
<option>Blueberry</option>
<option>Cherry</option>
<option>Coconut</option>
<option>Grapefruit</option>
<option>Kiwi</option>
<option>Lemon</option>
<option>Lime</option>
<option>Mango</option>
<option>Orange</option>
<option>Papaya</option>
</select>
</searchable-multi>
Set the placeholder
attribute or property to set the placeholder text used in the search input:
<searchable-multi placeholder="Add items...">
...
</searchable-multi>
The value
property is an array of all of the selected values:
let multi = document.querySeletor('searchable-multi');
console.log(multi.value); // ["Orange", "Kiwi", "Lemon"]
The change
event fires any time the value
changes, such as when an item is selected or unselected.
let multi = document.querySeletor('searchable-multi');
multi.addEventListener('change', e => {
console.log(multi.value); // ["Cherry"]
});
MIT, see the LICENSE file.