Ноябрь 4, 2019 Запись была обновлена
Плагин автозаполнения поля Email
Технологии развиваются, а в связи с этим и упрощается наша жизнь. Да возьмем те же генераторы CSS, которые позволяют создать отдельные элементы страницы без знания самого CSS. А затем лишь вставить в свой файл стилей. А в этой статье я хочу рассказать о том, как упростить заполнение формы посетителю на Вашем сайте. То есть человек начнет вводить Email, а ему сразу несколько подсказок появится.
Рекомендую также:
- Оригинальное оформление текстового поля HTML
- Оформляем списки CSS
- Красивое оформление полей для ввода с помощью jQuery
Посмотрите как это выглядит на реальном примере::
Посмотреть примерСкачать
Также я сделал скриншот:
Установка плагина Awesomeplete.js
HTML часть
Подключаем между тегами <head> </head> файл стилей скрипта (awesomplete.css):
1 | <link rel="stylesheet" href="css/awesomplete.css" /> |
Затем, перед закрывающим тегом </body> подключаем скрипт (awesomplete.js и jQuery):
1 2 | <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js'></script> <script src="js/awesomplete.js"></script> |
JS часть
Далее, для того чтобы это всё функционировало, необходимо написать небольшой JS код также перед закрывающим тегом </body>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script> $ = Awesomplete.$; $$ = Awesomplete.$$; new Awesomplete($('input[type="email"]'), { list: ["@aol.com", "@att.net", "@mail.ru", "@facebook.com", "@gmail.com", "@gmx.com", "@googlemail.com", "@google.com", "@hotmail.com", "@hotmail.co.uk", "@mac.com", "@me.com", "@mail.com", "@msn.com", "@live.com", "@sbcglobal.net", "@verizon.net", "@yahoo.com", "@yahoo.co.uk"], item: function(text, input){ var newText = input.slice(0, input.indexOf("@")) + text; return Awesomplete.$.create("li", { innerHTML: newText.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"), "aria-selected": "false" }); }, filter: function(text, input){ return RegExp("^" + Awesomplete.$.regExpEscape(input.replace(/^.+?(?=@)/, ''), "i")).test(text); } }); </script> |
В 5-й строке через запятую в двойных кавычках можно задать дополнительные адреса почтовых серверов, чтобы они также появлялись в выпадающем списке.
Вывод
С помощью этого плагина можно упростить человеку процесс комментирования на Вашем сайте. А также данный плагин очень полезен при заполнении большого количества полей формы. Я рассмотрел лишь одну из большого количества возможностей данного плагина, поэтому, кто хочет применить его не только для поля Email, а для всех полей, рекомендую посетить официальную страницу плагина — Awesomplete.js.
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Не получается, правда у меня файл Php….
Игорь, дело не в php. Ищи проблему в Javascript. Возможно плагин не подключил, возможно ошибка в коде.
С вами можно связаться как-нибудь?
Мои контакты есть на странице "Об авторе".