1 Шаг. Подключаем jQuery и плагин для автозавершения: 

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2. <script src="js/jquery.email-autocomplete.js"></script>

2 Шаг. Создаем поле для ввода email: 

  1. <input type="email" class="email" id="email" placeholder="Введите ваш e-mail">

3 Шаг. Инициализируем плагин emailautocomplete: 

  1. $( document ).ready(function() {
  2.     $(".email").emailautocomplete();
  3. });

Здесь так же можно добавить свои домены для автозавершения. Для этого необходимо использовать свойство domains, которое принимает массив с доменами для автозавершения, пример: 

  1. domains: ["mysite.com"]

Добавим несколько дополнительных доменов: 

  1. $( document ).ready(function() {
  2.     $(".email").emailautocomplete({
  3.         domains: ["mysite.com", "yandex.ru", "i.ua", "devreadwrite.com"]
  4.     });
  5. });

По умолчанию в плагине emailautocomplete заданы следующие домены для автозавершения: yahoo.com, google.com, hotmail.com, gmail.com, me.com, aol.com, mac.com, live.com, googlemail.com, msn.com, gmx.com, mail.com, outlook.com, icloud.com

Полный код страницы: 

  1. <!doctype html>
  2. <html lang="ru">
  3.     <head>
  4.         <title>JQuery email autocomplete. Автозавершение электронной почты в форме</title>        
  5.     </head>
  6.     <body>        
  7.         <form>
  8.             <div class="form-group">
  9.                 <label>E-mail</label>
  10.                 <input type="email" class="form-control email" id="email" placeholder="Введите ваш e-mail">
  11.                 <span class="help-block">При нажатии табуляции произойдет завершение и переход к следующему полю.</span>
  12.             </div>
  13.             <button type="button" class="btn btn-default">Готово</button>
  14.         </form>
  15.     </body>
  16.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  17.     <script src="/js/jquery.email-autocomplete.js"></script>
  18.     <script>
  19.         $(document).ready(function () {
  20.             $(".email").emailautocomplete({
  21.                 domains: ["mysite.com", "yandex.ru", "i.ua", "devreadwrite.com"]
  22.             });
  23.         });
  24.     </script>
  25. </html>