- Подробности
-
Категория: PHP. Синтаксис
http://ruseller.com/lessons/les1336/demo_1336.zip
В данном уроке мы сделаем системы автозаполнения полей для сайта. Данные могут располагаться в различных источниках — непосредственно в коде JavaScript, в базе данных или в XML файле.
demosourse
Разметка для демонстрационной страницы достаточна проста и очевидна.
Шаг 2. CSS
Зададим стили для формирования внешнего вида нашего кода.
css/main.css
001 *{
002 margin:0;
003 padding:0;
004 }
005
006 body {
007 background-repeat:no-repeat;
008 background-color:#bababa;
009 background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
010 background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
011 background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
012 background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
013 color:#fff;
014 font:14px/1.3 Arial,sans-serif;
015 min-height:600px;
016 }
017
018 footer {
019 background-color:#212121;
020 bottom:0;
021 box-shadow: 0 -1px 2px #111111;
022 display:block;
023 height:70px;
024 left:0;
025 position:fixed;
026 width:100%;
027 z-index:100;
028 }
029
030 footer h2{
031 font-size:22px;
032 font-weight:normal;
033 left:50%;
034 margin-left:-400px;
035 padding:10px 0;
036 position:absolute;
037 width:350px;
038 }
039
040 footer a.stuts,a.stuts:visited{
041 border:none;
042 text-decoration:none;
043 color:#fcfcfc;
044 font-size:14px;
045 left:50%;
046 line-height:31px;
047 margin:20px 0 0 110px;
048 position:absolute;
049 top:0;
050 }
051
052 footer .stuts span {
053 font-size:22px;
054 font-weight:bold;
055 margin-left:5px;
056 }
057
058 .container {
059 border:3px #111 solid;
060 color:#000;
061 margin:20px auto;
062 padding:20px;
063 position:relative;
064 text-align:center;
065 width:300px;
066
067 border-radius:15px;
068 -moz-border-radius:15px;
069 -webkit-border-radius:15px;
070 }
071
072 .ac_results {
073 border: solid 1px #E5E5E5;
074 color:#000;
075
076 border-radius:0 0 5px 5px;
077 -moz-border-radius:0 0 5px 5px;
078 -webkit-border-radius:0 0 5px 5px;
079 }
080 .ac_over {
081 background-color:#444;
082 }
083
084 form p {
085 margin-bottom:5px;
086 text-align:right;
087 }
088
089 form input {
090 background-color: #FFFFFF;
091 background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
092 background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
093 border: solid 1px #E5E5E5;
094 font-size:14px;
095 outline: 0;
096 padding: 9px;
097 width: 180px;
098
099 border-radius:5px;
100 -moz-border-radius:5px;
101 -webkit-border-radius:5px;
102
103 box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
104 -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
105 -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
106 }
107
108 form input:hover, form input:focus {
109 border-color: #C9C9C9;
110
111 box-shadow: rgba(0,0,0, 0.5) 0px 0px 8px;
112 -moz-box-shadow: rgba(0,0,0, 0.5) 0px 0px 8px;
113 -webkit-box-shadow: rgba(0,0,0, 0.5) 0px 0px 8px;
114 }
В пакете с исходниками присутствуют дополнительные файлы CSS:
css/jquery.autocomplete.css + css/indicator.gif
Оба файла генерируются при формировании пакете с плагином jQuery Аutocomplete при заполнении формы на сайте jQuery. В нашем проекте они используются как есть без изменений.
Шаг 3. JavaScript
Теперь создадим код, который будет выполнять автозаполнение полей формы.
js/script.js
01 $(function(){
02
03 $('#month').autocomplete(['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], {
04 width: 200,
05 max: 3
06 });
07
08 $('#year').autocomplete('data.php?mode=xml', {
09 width: 200,
10 max: 5
11 });
12
13 $('#country').autocomplete('data.php?mode=sql', {
14 width: 200,
15 max: 5
16 });
17
18 });
Мы используем плагин jQuery Autocomplete. В первом случае задаются значения непосредственно в коде JavaScript. Для второго и третьего варианта используется PHP файл (определяются два разных источника данных — XML и SQL). В пакете с исходниками также включены два других файла JavaScript:
js/jquery-1.5.2.min.js + js/jquery.autocomplete.pack.js
Это сама библиотека jQuery и плагин Autocomplete.
Шаг 4. SQL
Нужно подготовить нашу базу данных — создать в ней таблицу с информацией для автозаполнения. Используем следующие запросы:
01 CREATE TABLE `s85_countries` (
02 `country_code` varchar(2) NOT NULL,
03 `country_name` varchar(255) NOT NULL,
04 PRIMARY KEY (`country_code`)
05 ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
06
07 INSERT INTO `s85_countries` (`country_code`, `country_name`) VALUES
08 ('AR', 'Аргентина'),
09 ('AU', 'Австралия'),
10 ('BR', 'Бразилия'),
11 ('CA', 'Канада'),
12 ('CN', 'Китай'),
13 ('IN', 'Индия'),
14 ('KZ', 'Казахстан'),
15 ('RU', 'Россия'),
16 ('SD', 'Судан'),
17 ('US', 'США');
Код запросов содержится в пакете с исходниками.
Шаг 5. PHP
Теперь формируем код, который будет возвращать данные для плагина Autocomplete:
data.php
01 <?php
02
03 if (version_compare(phpversion(), "5.3.0", ">=") == 1)
04 error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
05 else
06 error_reporting(E_ALL & ~E_NOTICE);
07
08 require_once('classes/CMySQL.php');
09
10 $sParam = $GLOBALS['MySQL']->escape($_GET['q']); // Выход по чтению внешних данных
11 if (! $sParam) exit;
12
13 switch ($_GET['mode']) {
14 case 'xml': // Используем XML как источник данных
15 $aValues = $aIndexes = array();
16 $sFileData = file_get_contents('data.xml'); // Читаем содержимое
17 $oXmlParser = xml_parser_create('UTF-8');
18 xml_parse_into_struct($oXmlParser, $sFileData, $aValues, $aIndexes);
19 xml_parser_free( $oXmlParser );
20
21 $aTagIndexes = $aIndexes['ITEM'];
22 if (count($aTagIndexes) <= 0) exit;
23 foreach($aTagIndexes as $iTagIndex) {
24 $sValue = $aValues[$iTagIndex]['value'];
25 if (strpos($sValue, $sParam) !== false) {
26 echo $sValue . "n";
27 }
28 }
29 break;
30 case 'sql': // Используем базу данных как источник данных
31 $sRequest = "SELECT `country_name` FROM `s85_countries` WHERE `country_name` LIKE '%{$sParam}%' ORDER BY `country_code`";
32 $aItemInfo = $GLOBALS['MySQL']->getAll($sRequest);
33 foreach ($aItemInfo as $aValues) {
34 echo $aValues['country_name'] . "n";
35 }
36 break;
37 }
Результат фильтруется с помощью входного параметра $_GET['q'] из активного текстового поля (в которое что-то начали вводить). Скрипт выдает все подходящие записи. Также мы используем другой файл:
classes/CMySQL.php
Это класс для работы с базой данных (очень удобный). В его конструкторе нужно установить параметры для соединения с базой данных:
1 $this->sDbName = '_ИМЯ_БАЗЫ_ДАННЫХ_';
2 $this->sDbUser = '_ИМЯ_ПОЛЬЗОВАТЕЛЕЯ_';
3 $this->sDbPass = '_ПАРОЛЬ_';
Шаг 6. XML
А вот так выглядит файл XML с данным для автозаполнения:
01 <?xml version="1.0"?>
02 <items>
03 <item>1991</item>
04 <item>1990</item>
05 <item>1991</item>
06 <item>1992</item>
07 <item>1993</item>
08 <item>1994</item>
09 <item>1995</item>
10 <item>1996</item>
11 <item>1997</item>
12 <item>1998</item>
13 <item>1999</item>
14 <item>2000</item>
15 <item>2001</item>
16 <item>2002</item>
17 <item>2003</item>
18 <item>2004</item>
19 <item>2005</item>
20 <item>2006</item>
21 <item>2007</item>
22 <item>2008</item>
23 <item>2009</item>
24 <item>2010</item>
25 <item>2011</item>
26 <item>2012</item>
27 <item>2013</item>
28 <item>2014</item>
29 <item>2015</item>
30 </items>
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/autocomplete-with-php-jquery-mysql-and-xml/
Перевел: Сергей Фастунов
*PHP*