Using mailcheck.js
var $email = $('input[type="email"].mailcheck');
var $hint = $('#mailcheck-hint');
var typingTimer;
var doneTypingInterval = 500;
$email.keyup( function() {
$hint.css('display', 'none').empty();
clearTimeout(typingTimer);
$(this).mailcheck({
suggested: function(element, suggestion) {
if(!$hint.html()) {
var suggestion = "<i class='fa fa-exclamation-circle'></i> Do you mean <span class='suggestion'>"
+ "<span class='address'>" + suggestion.address + "</span>"
+ "@<a href='#' class='domain'>" + suggestion.domain + "</a></span>?";
typingTimer = setTimeout(function() {
$hint.html(suggestion).fadeIn(150);
}, doneTypingInterval);
}
else {
$(".address").html(suggestion.address);
$(".domain").html(suggestion.domain);
}
}
});
});
$hint.on('click', '.domain', function() {
$email.val($(".suggestion").text());
$hint.fadeOut(200, function() {
$(this).empty();
});
return false;
});
<form action="" method="post" target="_blank">
<input type="email" value="" name="EMAIL" class="mailcheck required email" placeholder="enter email">
<div id="mailcheck-hint"></div>
<input type="submit" value="Submit" name="submit" class="button">
</form>
add_action( 'wp_enqueue_scripts', 'wpdevco_enqueue_things' );
function wpdevco_enqueue_things() {
wp_enqueue_script( 'mailcheck', CHILD_SCRIPTS_URL . '/mailcheck.min.js', array( 'jquery' ), '1.1.0', true );
}