Author: | arispt |
---|---|
Views Total: | 1,536 views |
Official Page: | Go to website |
Last Update: | April 18, 2022 |
License: | MIT |
Preview:

Description:
multi-input.js is a simple, lightweight JavaScript library that helps create a tags input style multiple select component using the HTML data list.
How to use it:
1. Import the multi-input.js library.
<script src="multi-input.js"></script>
2. Wrap your tags input together with the data list into the multi-input
component.
<multi-input> <input list="speakers"> <datalist id="speakers"> <option value="Banquo"></option> <option value="Bishop Stokesly of London"></option> <option value="Caesar’s Second Watchman"></option> <option value="Celia"></option> <option value="Cleopatra"></option> <option value="Dogberry"></option> <option value="Falstaff"></option> <option value="First Servant"></option> <option value="Hamlet"></option> <option value="Juliet"></option> <option value="Macbeth"></option> </datalist> </multi-input>
3. That’s it. Enable a button to get all options that are selected.
<button id="get">Get Options</button> <p id="values"></p>
const getButton = document.getElementById('get'); const multiInput = document.querySelector('multi-input'); const values = document.querySelector('#values'); getButton.onclick = () => { if (multiInput.getValues().length > 0) { values.textContent = `Got ${multiInput.getValues().join(',')}!`; } else { values.textContent = 'Got noone :`^(.'; } } document.querySelector('input').focus();