Плагін автозаповнення поля email

Відео: Woocommerce Autocomplete автозаповнення адреси супер плагін

Технології розвиваються, а в зв`язку із цим і спрощується наше життя. Так візьмемо самі генератори CSS, які дозволяють створити окремі елементи сторінки без знання самого CSS. А потім лише вставити в свій файл стилів. А в цій статті я хочу розповісти про те, як спростити заповнення форми відвідувачеві на Вашому сайті. Тобто людина почне вводити Email, а йому відразу кілька підказок з`явиться.

Рекомендую також:

• Оригінальне оформлення текстового поля HTML
• Оформляємо списки CSS
• Гарне оформлення полів для введення за допомогою jQuery

Подивіться як це виглядає на реальному прикладі ::

Подивитися прімерСкачать

Також я зробив скріншот:

Установка плагіна Awesomeplete.js

HTML частина

Підключаємо між тегами файл стилів скрипта (awesomplete.css):

1

lt;link rel="Stylesheet" href="Css / awesomplete.css" /gt;

Потім, перед закриває тегом підключаємо скрипт (awesomplete.js і jQuery):

12

lt;script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js `gt; lt;/scriptgt;lt;script src="Js / awesomplete.js"gt; lt;/scriptgt;

JS частина

Далі, для того щоб це все функціонувало, необхідно написати невелике JS код також перед закриває тегом:

Відео: Thrive Leads - плагін Wordpress для збору e-mail передплатників

123456789101112131415161718

lt;scriptgt; $ = 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"), "$"),"Aria-selected": "false"}) -}, Filter: function (text, input) {return RegExp ( "^" + Awesomplete. $. RegExpEscape (input.replace (/^.+?(?=@)/, ``), "i")). test (text) -}}) -lt;/scriptgt;

У 5-му рядку через кому в подвійних лапках можна задати додаткові адреси поштових серверів, щоб вони також з`являлися в випадаючому списку.

висновок

За допомогою цього плагіна можна спростити людині процес коментування на Вашому сайті. А також даний плагін дуже корисний при заповненні великої кількості полів форми. Я розглянув лише одну з великої кількості можливостей даного плагіна, тому, хто хоче застосувати його не тільки для поля Email, а для всіх полів, рекомендую відвідати офіційну сторінку плагіна - Awesomplete.js.

Успіхів!

З повагою, Юрій Німець