<searchable-multi>

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.

Install

Yarn:

yarn add searchable-multi

Bower:

bower install matthewp/searchable-multi --save

Usage

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>

placeholder

Set the placeholder attribute or property to set the placeholder text used in the search input:

<searchable-multi placeholder="Add items...">
   ...
</searchable-multi>

value

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"]

change

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"]
});

License

MIT, see the LICENSE file.