Skip to content
A custom element that makes multi selects more user friendly, with search
JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is 19 commits ahead, 65 commits behind fabianlindfors:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
test
.gitignore
.travis.yml
LICENSE
README.md
bower.json
multi.html
multi.js
package.json
yarn.lock

README.md

<searchable-multi>

Published on webcomponents.org npm version

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.

You can’t perform that action at this time.