Лого www.SiteHere.ru

Плагин автозаполнения поля Email

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

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

Посмотрите как это выглядит на реальном примере::

Посмотреть примерСкачать

Также я сделал скриншот:

Пример автозаполнения

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

HTML часть

Подключаем между тегами <head> </head> файл стилей скрипта (awesomplete.css):

HTML КОД
1
<link rel="stylesheet" href="css/awesomplete.css" />

Затем, перед закрывающим тегом </body> подключаем скрипт (awesomplete.js и jQuery):

HTML КОД
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>:

HTML&JS КОД
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.

Успехов!

С Уважением, Юрий Немец

Плагин автозаполнения поля Email 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Игорь

    Не получается, правда у меня файл Php….

     
    • Юрий

      Игорь, дело не в php. Ищи проблему в Javascript. Возможно плагин не подключил, возможно ошибка в коде.

       
  • Игорь

    С вами можно связаться как-нибудь?

     
    • Юрий

      Мои контакты есть на странице "Об авторе".

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *