Tags Input Based On HTML Data List – multi-input.js

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();