[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery, etc.) / frameworks (React, Angular, Vue, etc.), and maximizes native behaviors on desktop and mobile browsers.

Email Genie is a small email domain name auto-completion library that displays a list of domain suggestions as you type the email username into the email input.

👍 Lite 5kb (2kb Gzipped) ⚡ Fast Native JavaScript 🚫 No Dependencies 🚫 No HTML Wrapper 🚫 No CSS injected.

Must Read: A JavaScript Library to Create Input Fields That Accept Multiple Email Addresses | MeiMei

How to make use of it:

1. Install and import the Email Genie.

# NPM
$ npm i email-genie

import EmailGenie from 'email-genie';

2. Or insert them email-genie.min.js into the document.

<script src=”/dist/email-genie.min.js”></script>

3. Create an e-mail input on the web page.

<input type="email" class="email" />

4. Initialize the Email Genie.

var field = new EmailGenie('.email');

5. Append extra domain names to the domain listing.

var field = new EmailGenie('.email',{
    domains: ['gmail.com', 'outlook.com', 'hotmail.com', 'msn.com', 'live.com', 'googlemail.com', 'yahoo.com', 'me.com', 'icloud.com']
});

6. Determine whether or not to the built-in domain listing.

var field = new EmailGenie('.email',{
    domains: ['gmail.com', 'outlook.com', 'hotmail.com', 'msn.com', 'live.com', 'googlemail.com', 'yahoo.com', 'me.com', 'icloud.com'],
    overrideDomains: true,
    insert: 'afterend' // 'beforebegin', 'afterend', 'documentend'
});

Options

Must Read: Draggable Drag-n-Drop Email Editor Component for Vue.js

Option	Default	Possibilities	Description
domains	[‘gmail.com’, ‘outlook.com’, ‘hotmail.com’, ‘msn.com’, ‘live.com’, ‘googlemail.com’, ‘yahoo.com’, ‘me.com’, ‘icloud.com’]	[]	An array of domain suggestions. (By default, this array will be added to the default domain suggestions. View overrideDomains option to override instead.)
overrideDomains	false	Boolean (true/false)	Whether the domain suggestions array should override the default one.
insert	‘afterend’	‘beforebegin’, ‘afterend’, ‘documentend’	Where the data list generated should be inserted: Before the input, after the input, and at the end of the document.