Автозаполнение полей с использованием PHP, MySQL, jQuery и XML
В данном уроке мы сделаем системы автозаполнения полей для сайта. Данные могут располагаться в различных источниках - непосредственно в коде JavaScript, в базе данных или в XML файле.
Шаг 1. Разметка HTML
index.html
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Автозаполненние с помощью PHP, jQuery, MySQL и XML | Материалы сайта RUSELLER.COM</title> <link href="/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" /> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="/js/jquery.autocomplete.pack.js"></script> <script type="text/javascript" src="/js/script.js"></script> </head> <body> <div class="container"> <form action="#"> <p><label>Месяц:</label> <input id="month" type="text" autocomplete="off"></p> <p><label>Год:</label> <input id="year" type="text" autocomplete="off"></p> <p><label>Страна:</label> <input id="country" type="text" autocomplete="off"></p> </form> </div> <footer> <h2>Автозаполненние с помощью PHP, jQuery, MySQL и XML</h2> <a href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a> </footer> </body> </html>
Разметка для демонстрационной страницы достаточна проста и очевидна.
Шаг 2. CSS
Зададим стили для формирования внешнего вида нашего кода.
css/main.css
*{ margin:0; padding:0; } body { background-repeat:no-repeat; background-color:#bababa; background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%); background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%); background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%); background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%); color:#fff; font:14px/1.3 Arial,sans-serif; min-height:600px; } footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100; } footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:10px 0; position:absolute; width:350px; } footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:20px 0 0 110px; position:absolute; top:0; } footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { border:3px #111 solid; color:#000; margin:20px auto; padding:20px; position:relative; text-align:center; width:300px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; } .ac_results { border: solid 1px #E5E5E5; color:#000; border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; } .ac_over { background-color:#444; } form p { margin-bottom:5px; text-align:right; } form input { background-color: #FFFFFF; background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); border: solid 1px #E5E5E5; font-size:14px; outline: 0; padding: 9px; width: 180px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } form input:hover, form input:focus { border-color: #C9C9C9; box-shadow: rgba(0,0,0, 0.5) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.5) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.5) 0px 0px 8px; }
В пакете с исходниками присутствуют дополнительные файлы CSS:
css/jquery.autocomplete.css + css/indicator.gif
Оба файла генерируются при формировании пакете с плагином jQuery Аutocomplete при заполнении формы на сайте jQuery. В нашем проекте они используются как есть без изменений.
Шаг 3. JavaScript
Теперь создадим код, который будет выполнять автозаполнение полей формы.
js/script.js
$(function(){ $('#month').autocomplete(['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], { width: 200, max: 3 }); $('#year').autocomplete('data.php?mode=xml', { width: 200, max: 5 }); $('#country').autocomplete('data.php?mode=sql', { width: 200, max: 5 }); });
Мы используем плагин jQuery Autocomplete. В первом случае задаются значения непосредственно в коде JavaScript. Для второго и третьего варианта используется PHP файл (определяются два разных источника данных - XML и SQL). В пакете с исходниками также включены два других файла JavaScript:
js/jquery-1.5.2.min.js + js/jquery.autocomplete.pack.js
Это сама библиотека jQuery и плагин Autocomplete.
Шаг 4. SQL
Нужно подготовить нашу базу данных - создать в ней таблицу с информацией для автозаполнения. Используем следующие запросы:
CREATE TABLE `s85_countries` ( `country_code` varchar(2) NOT NULL, `country_name` varchar(255) NOT NULL, PRIMARY KEY (`country_code`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; INSERT INTO `s85_countries` (`country_code`, `country_name`) VALUES ('AR', 'Аргентина'), ('AU', 'Австралия'), ('BR', 'Бразилия'), ('CA', 'Канада'), ('CN', 'Китай'), ('IN', 'Индия'), ('KZ', 'Казахстан'), ('RU', 'Россия'), ('SD', 'Судан'), ('US', 'США');
Код запросов содержится в пакете с исходниками.
Шаг 5. PHP
Теперь формируем код, который будет возвращать данные для плагина Autocomplete:
data.php
<?php if (version_compare(phpversion(), "5.3.0", ">=") == 1) error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); else error_reporting(E_ALL & ~E_NOTICE); require_once('classes/CMySQL.php'); $sParam = $GLOBALS['MySQL']->escape($_GET['q']); // Выход по чтению внешних данных if (! $sParam) exit; switch ($_GET['mode']) { case 'xml': // Используем XML как источник данных $aValues = $aIndexes = array(); $sFileData = file_get_contents('data.xml'); // Читаем содержимое $oXmlParser = xml_parser_create('UTF-8'); xml_parse_into_struct($oXmlParser, $sFileData, $aValues, $aIndexes); xml_parser_free( $oXmlParser ); $aTagIndexes = $aIndexes['ITEM']; if (count($aTagIndexes) <= 0) exit; foreach($aTagIndexes as $iTagIndex) { $sValue = $aValues[$iTagIndex]['value']; if (strpos($sValue, $sParam) !== false) { echo $sValue . "\n"; } } break; case 'sql': // Используем базу данных как источник данных $sRequest = "SELECT `country_name` FROM `s85_countries` WHERE `country_name` LIKE '%{$sParam}%' ORDER BY `country_code`"; $aItemInfo = $GLOBALS['MySQL']->getAll($sRequest); foreach ($aItemInfo as $aValues) { echo $aValues['country_name'] . "\n"; } break; }
Результат фильтруется с помощью входного параметра $_GET['q'] из активного текстового поля (в которое что-то начали вводить). Скрипт выдает все подходящие записи. Также мы используем другой файл:
classes/CMySQL.php
Это класс для работы с базой данных (очень удобный). В его конструкторе нужно установить параметры для соединения с базой данных:
$this->sDbName = '_ИМЯ_БАЗЫ_ДАННЫХ_'; $this->sDbUser = '_ИМЯ_ПОЛЬЗОВАТЕЛЕЯ_'; $this->sDbPass = '_ПАРОЛЬ_';
Шаг 6. XML
А вот так выглядит файл XML с данным для автозаполнения:
<?xml version="1.0"?> <items> <item>1991</item> <item>1990</item> <item>1991</item> <item>1992</item> <item>1993</item> <item>1994</item> <item>1995</item> <item>1996</item> <item>1997</item> <item>1998</item> <item>1999</item> <item>2000</item> <item>2001</item> <item>2002</item> <item>2003</item> <item>2004</item> <item>2005</item> <item>2006</item> <item>2007</item> <item>2008</item> <item>2009</item> <item>2010</item> <item>2011</item> <item>2012</item> <item>2013</item> <item>2014</item> <item>2015</item> </items>
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/EV1z9P0L7bQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Дураки ставят вопросы чаще, чем пытливые люди Горький Максим - (1868-1936) - русский писатель, литературный критик и публицист, общественный деятель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.