Usage

1. Include the library.

<script src="path/to/multi-input.js"></script>

2. Include the plugin styles, either the compiled CSS...

<link rel="stylesheet" href="path/to/multi-input.css">

...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization.

@import 'multi-input'; //See 'Notes' section.

3. Finally, initialize the plugin.
You have two options:
Option A: All input:multiple elements on the page

MultiInput.attachAll();

Option B: a specific input

new MultiInput.MultiInput(el)

All done. That will turn this:

...into this:

There are a couple of options you can specify, either via a second parameter:

        
    new MultiInput.MultiInput(el, {
      class: '',
      prefill: [],
      useListValue: true
    })
        
      

All values can also be supplied as data attributes on the original input

Class

Specify extra classes as a string to be added to the list wrapper

        
    new MultiInput.MultiInput(el, {
      class: 'some extra classes'
    })
        

Prefill Values

Supply any values that should be added by default.
When supplied via a data attribute it should be a json encode string.

      
    new MultiInput.MultiInput(el, {
      prefill: [
        "Value 1",
        "Value 2",
        "Value 3"
      ]
    })
      
    

useListValue

An input can have a datalist attached to it, for easier supplying of values.
Set this to true if you want the data-value of an option to be added instead of the value
The list option will be added with the value as label and the data-value as value

Example
<datalist id="phones">
<option data-value="345" value="+12345678899">Some Name 1</option>
<option data-value="346" value="+12345659">Some Name 2</option>
</datalist>

Notes

• When you request the value of the element (el.value) it will return the value of the main input if not empty else an array of already supplied values
• See NiceSelect for a similar package for select inputs