Advanced Multiple Emails Input Component In JavaScript

Preview:

Description:

An advanced email input component that allows you to insert multiple email addresses in an email box just like tags.

How to use it:

1. Include the meimei-lib.min.js on the page.

<script src="dist/meimei-lib.min.js"></script>

2. Create a container to hold the email input.

<div class="emailInput"></div>

3. Initialize the component and you’re done.

var inputContainer = document.querySelectorAll('.emailInput');
var emailsInput = MeiMei(inputContainer);

4. Set the placeholder for the email input.

var emailsInput = MeiMei(inputContainer,{
    placeholder: 'Add More Emails Here...'
});

5. Callback functions.

var emailsInput = MeiMei(inputContainer,{
    onAddEntry: function onAddEntry() {
      console.log('add');
    },
    onRemoveEntry: function onRemoveEntry() {
      console.log('remove');
    },
});

6. Apply custom classes to the email input.

var emailsInput = MeiMei(inputContainer,{
    theme: {
      box: "email-box-class",
      input: "input-class",
      chip: "chip-class",
      chipInvalid: "invalid-class",
      cross: "cross-icon-class"
    }
});

7. API methods.

// add a new email address string
emailsInput.addEntry(emailAddress);
// removes an email address
emailsInput.removeEntry(emailAddress);
// returns an array of email addresses
emailsInput.entryList();
// returns the reference to the input field
emailsInput.inputFieldRef();
// returns the reference to the input container
emailsInput.ref();
// optional settings
emailsInput.optionalProps({});