1 Шаг. Подключаем jQuery и плагин для автозавершения:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="js/jquery.email-autocomplete.js"></script>
2 Шаг. Создаем поле для ввода email:
<input type="email" class="email" id="email" placeholder="Введите ваш e-mail">
3 Шаг. Инициализируем плагин emailautocomplete:
$( document ).ready(function() { $(".email").emailautocomplete(); });
Здесь так же можно добавить свои домены для автозавершения. Для этого необходимо использовать свойство domains, которое принимает массив с доменами для автозавершения, пример:
domains: ["mysite.com"]
Добавим несколько дополнительных доменов:
$( document ).ready(function() { $(".email").emailautocomplete({ domains: ["mysite.com", "yandex.ru", "i.ua", "devreadwrite.com"] }); });
По умолчанию в плагине 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
Полный код страницы:
<!doctype html> <html lang="ru"> <head> <title>JQuery email autocomplete. Автозавершение электронной почты в форме</title> </head> <body> <form> <div class="form-group"> <label>E-mail</label> <input type="email" class="form-control email" id="email" placeholder="Введите ваш e-mail"> <span class="help-block">При нажатии табуляции произойдет завершение и переход к следующему полю.</span> </div> <button type="button" class="btn btn-default">Готово</button> </form> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="/js/jquery.email-autocomplete.js"></script> <script> $(document).ready(function () { $(".email").emailautocomplete({ domains: ["mysite.com", "yandex.ru", "i.ua", "devreadwrite.com"] }); }); </script> </html>
Комментарии
Комментарии отсутствуют, Вы можете быть первым