Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Автозаполнение полей форм HTML (jquery.autocomplete.pack)

Сергей    16.04.2015    12593    4.4 из 5.0 (12)

Оцените материал:

    О чем здесь?

    Подключение плагина автозаполнения jquery.autocomplete.pack для полей формы оформления заказа интернет магазина.

    Как работает автозаполнение форм?

    Как уже говорилось в анонсе этой заметки, при вводе в поле какого-либо значения пользователю предлагаются на выбор варианты. При нажатии на один из них, значение записывается в поле и пользователь может переходить к следующему. Посмотрите видео:


    Данные для подстановки мы заранее указываем с помощью JavaScript. Затем активируем плагин для определенного поля.

    Плюс решения в том, что можно использовать разные переменные для нескольких полей.

    C какими полями использовать автозаполнение?

    По идее, плагин автозаполнения призван заменить большие длинные списки на один маленький инпут.

    Что касается страницы оформления заказа, то это может быть город доставки из списка доступных. Для формы поиска это могут быть наиболее популярные запросы, которые вы соберете через Яндекс.Метрику или статистику поиска по магазину.

    Главная задача сводится к заполнению переменной данными, которые будут подставляться в поле формы.

    Как предоставить данные для выбора?

    Для этого мы воспользуемся JavaScript. Если вы не обладаете навыками программирования на этом языке, не расстраивайтесь, они вам не понадобятся. Просто следуйте инструкции. Откройте любой текстовый редактор, подойдет даже "Блокнот":

    После готовности страницы, определим массив city и добавим в него список городов через запятую:

    $(document).ready(function(){
     var city = new Array("Москва", "Санкт-Петербург", "Хабаровск");
    });
    

    Как видите, все просто: данные указываются в кавычках через запятую. Их может быть много.

    Не закрывайте и не сохраняйте файл в блокноте. В следующем пункте мы добавим в него инициализацию плагина.

    Подключение плагина jquery.autocomplete.pack

    В первую очередь необходимо скачать и подключить плагин. В данной статье говорится о версии Autocomplete - jQuery plugin 1.0.2. Чтобы подключить актуальную версию плагина, перейдите на сайт Autocomplete Plugin.

    После того, как скачали скрипт, подключите его в шаблон той страницы, где располагается форма. В нашем примере это шаблон страницы служебных форм при условии <?if $PAGE_ID$ = 'checkout' ?>... <?endif?> . Перед закрывающим тегом </body> добавьте:

    <?if $PAGE_ID$ = 'checkout' ?>
    <script src="/js/jquery.autocomplete.pack.js"></script>
    <?endif?>
    

    Для корректного отображения нам понадобятся и CSS стили. Добавьте следующие стили в CSS интернет магазина:

    .ac_results {
     padding: 0px;
     border: 1px solid black;
     background-color: white;
     overflow: hidden;
     z-index: 99999;
    }
    
    .ac_results ul {
     width: 100%;
     list-style-position: outside;
     list-style: none;
     padding: 0;
     margin: 0;
    }
    
    .ac_results li {
     margin: 0px;
     padding: 2px 5px;
     cursor: default;
     display: block;
     font: menu;
     font-size: 12px;
     line-height: 16px;
     overflow: hidden;
    }
    
    .ac_loading {
     background: white url('/img/indicator.gif') right center no-repeat;
    }
    
    .ac_odd {
     background-color: #eee;
    }
    
    .ac_over {
     background-color: #0A246A;
     color: white;
    }
    

    Также добавьте в папку /img изображение indicator.gif.

    Теперь давайте вернемся к нашему блокноту:

    Я добавил в него много городов. Если вас интересует этот список (для России), то в конце статьи будет файл с перечнем и вы сможете его скачать.

    Как вы понимаете, плагин не будет работать сам по себе. Его нужно "включить" и задать настройки. Делается это так:

    $("#order-fld-1").autocomplete(city, {
     delay:3,
     minChars:1,
     matchSubset:1,
     autoFill:true,
     maxItemsToShow:10,
     max: 20
    });
    

    Давайте рассмотрим по порядке, что же тут написано.

    • #order-fld-1 - это id нашего поля, в которое пользователь будет вводить данные. Я поставил значение поле при оформлении заказа с номером 1. Вы можете заменить его на любое другое просто подставив нужный номер поля. Номер можно найти в панели управления - Управление полями заказа;
    • city - название переменной, в которую мы занесли наши данные в предыдущем пункте;
    • delay - задержка перед появлением выпадающего списка;
    • minChars - минимальное количество символов, после введения которых появляются подсказки;
    • maxItemsToShow - количество подсказок, которые будут отображаться.

    После того, как вы настроите все указанные параметры, просто добавьте весь код в файл:

    $(document).ready(function(){
     // Данные для автозаполнения
     var city = new Array("Москва", "Санкт-Петербург", "Хабаровск");
     // Запуск плагина
     $("#order-fld-1").autocomplete(city, {
      delay:3,
      minChars:1,
      matchSubset:1,
      autoFill:true,
      maxItemsToShow:10,
      max: 20
     });
    });
    

    Здесь для простоты я не стал указывать все города. На самом деле в блокноте это выглядело так:

    Теперь сохраняем наш файл. Я назвал его ac-city.txt. и задал кодировку UTF-8:

    Теперь идем в файловый менеджер и загружаем файл в папку /js:

    Конечно, мы не можем использовать файл с расширением .txt как скрипт, поэтому нажмите по кнопке "Переименовать" напротив файла и измените расширение на .js:

    Теперь последнее - надо подключить скрипт для шаблона страницы служебных форм:

    <?if $PAGE_ID$ = 'checkout' ?>
    <script src="/js/jquery.autocomplete.pack.js"></script>
    <script src="/js/ac-city.js"></script>
    <?endif?>
    

    Готово!

    Итого

    1. Скачайте и загрузите на сайт плагин Autocomplete - jQuery plugin 1.0.2
    2. Создайте файл с данными для автозаполнения или воспользуйтесь готовым примером
    3. Подключите скрипты для шаблона страницы служебных форм

    Статьи по теме

    Обсуждение

    Всего комментариев: 12

    avatar
    1
    Спасибо, отличная статья.
    avatar
    2
    полезный материал))
    avatar
    3
    Да, интересно и полезно. 
    А как заполнять поля если id не доступен, на пример (name="other6")? 
    Хочу попробовать этот скрипт для заполнения поля other на странице редактирования товара. 
    К примеру я использую дополнительное поле для обозначения цвета, которое потом выводиться в фильтре. 

    Было бы гораздо легче заполнять все поля если бы стояло автозаполнение...
    Подскажите пожалуйста решение, спасибо.
    avatar
    4
    Попробовал подставить вместо "#order-fld-1" значение "input[name*='other6']" ,что то не получается..
    avatar
    0
    5
    Михаил,
    
    Код
    'input[name*="other6"]'
    avatar
    6
    Сергей, спасибо, поле вроде бы обрабатывается скриптом, однако не разобрался почему автозаполнение выключено? ... вот скрин 
    avatar
    0
    7
    атрибут autocomplete отвечает за показ ранее введенных данных, которые сохранятся через браузер. Фактически, это немного другое и оно отключено, чтобы не было наложения друг на друга
    avatar
    8
    Спасибо, будем разбираться
    avatar
    9
    Здравствуйте Сергей!!! Помогите реализовать jQuery Autocomplete: передача параметров из одного поля в другое, как показано на этом сайте http://habrahabr.ru/post/267191/, или на этом http://recens.ru/jquery/plugin_auto_complete.html пример с городам. Мне нужны только два поля УЛИЦА и ДОМ, сам не могу нет знаний в программировании! Заранее спасибо!!!
    avatar
    10
    Спасибо огромнейшее! Я и не подозревала, что все так просто! 
    Вот только еще подумаю как русифицировать "No Records."
    avatar
    0
    11
    Скорее всего в файле jquery.autocomplete.pack.js есть эта фраза и ее можно заменить в обычном блокноте.
    a
    12
    Здравствуйте Сергей, помогите разобраться сделал вроде все как у вас написано, но у меня ничего не работает.
    Автозаполнение полей форм HTML (jquery.autocomplete.pack)
    Автозаполнение полей форм HTML (jquery.autocomplete.pack)