https://github.com/samdutton/multi-input
Custom input element to select multiple items using a datalist to suggest options.
https://github.com/samdutton/multi-input
Last synced: about 1 month ago
JSON representation
Custom input element to select multiple items using a datalist to suggest options.
- Host: GitHub
- URL: https://github.com/samdutton/multi-input
- Owner: samdutton
- Created: 2019-06-11T15:32:30.000Z (almost 7 years ago)
- Default Branch: glitch
- Last Pushed: 2019-06-21T13:37:20.000Z (almost 7 years ago)
- Last Synced: 2025-10-11T05:43:07.173Z (5 months ago)
- Language: JavaScript
- Size: 43.9 KB
- Stars: 41
- Watchers: 0
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# <multi-input>
Custom element for selecting multiple items using an `input` and `datalist` to suggest options.
Delete items with Backspace or by tapping/clicking an item's × icon.
| [View and remix this project live on Glitch](https://glitch.com/~multi-input) |
| --- |
## Usage
1. Add [multi-input.js](https://github.com/samdutton/multi-input/blob/glitch/multi-input.js) to your project and link to it:
```html
```
2. Wrap an `input` and a `datalist` in a `` (see [index.html](https://github.com/samdutton/multi-input/blob/glitch/index.html#L14)):
```html
...
```
3. Get selected values like this (see [script.js](https://github.com/samdutton/multi-input/blob/glitch/script.js)):
```js
const getButton = document.getElementById('get');
const multiInput = document.querySelector('multi-input');
getButton.onclick = () => {
console.log(multiInput.getValues());
}
```
## Can I style the components?
Sure.
There are several custom properties:
```
--multi-input-border
--multi-input-item-bg-color
--multi-input-item-border
--multi-input-item-font-size
--multi-input-input-font-size
```
Style components like this:
``` css
multi-input {
--multi-input-border: 2px solid red;
}
```
## Known issues
### Problems with shadow DOM CSS pseudo classes
Two selectors have been added outside the shadow DOM using a `multi-input` selector:
* `::slotted(input)::-webkit-calendar-picker-indicator` doesn't work in any browser.
* `::slotted(div.item)::after` doesn't work in Safari.
## My platform doesn't support custom elements :^|
Custom elements are [widely supported by modern browsers](https://caniuse.com/#search=custom%20elements).
However, `` simply wraps an `input` element that has a `datalist`, so behaviour will degrade gracefully to a 'normal' `datalist` experience in browsers without custom element support.
## My platform doesn't support datalist :^| :^|
The `datalist` element is [supported by all modern browsers](https://caniuse.com/#feat=datalist).
If your target browser doesn't support `datalist`, behaviour will fall back to the plain old `input` experience.
## Obligatory screencast
