UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Самый потрясающий успех частенько приходит прямо вслед за самым горьким разочарованием © Жизнь

»

Введите код полученный после подписки

  • 16

  • 2

Поиск с выпадающим списком на Ajax и PHP

Автор - Жур Артур | Добавлено - 2014-01-11 | Просмотров - 15187 | Скачено - 349

В этом уроке мы с вами реализуем поиск с выпадающим списком в котором будут найденные результаты. Весь поиск будет работать без перезагрузки страницы с помощью JQuery, Ajax и PHP.

1Подключаем все необходимые плагины

Первое что нужно подключить это плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом </head> .

Подключение плагина


Теперь нужно подключить плагин TextChange, он нужен для того, чтобы при каждом вводе поискового запроса происходило обновление функции поиска.

Подключение плагина


2JQuery код


3Обработчик Search.php

Весь поиск будет происходить в обработчике. В обработчике кодировка должна быть UTF8.

// Проверяем как обратились к этому обработчику если методом POST, то всё нормально, а если нет, то обработчик выполняться не будет!
 if($_SERVER["REQUEST_METHOD"] == "POST")
{

 include("db_connect.php"); // Подключение к БД.

 $search = mysql_real_escape_string($_POST['q']); // Принимаем поисковое значение которое нам отправил Ajax и сразу отчищаем его от вредоностного кода который может ввести пользователь.
 
// Поиск совпадений по поисковому значению. LIKE '%$search%' - Поиск совпадений. LIMIT 5 - Выводить Пять совпадений.
$result = mysql_query("SELECT * FROM Ваша таблица с товарами WHERE поле в котором нужно искать LIKE '%$search%' LIMIT 5",$link);

 // Проверяем нашлось что или нет.
 If (mysql_num_rows($result) > 0)
{
$row = mysql_fetch_array($result);

// Указываем цикл с помощью которого будем выводить все совпадения поиска.
do
{
  // Код пропорционального уменьшения изображения товара  
$img_path = $row["image"]; // Поле в котором у вас путь и название изображения.
$max_width = 60; // Максимальный размер изображения. По ширине.
$max_height = 60; // Максимальный размер изображения. По высоте. 
 list($width, $height) = getimagesize($img_path); 
$ratioh = $max_height/$height; 
$ratiow = $max_width/$width; 
$ratio = min($ratioh, $ratiow); 
// New dimensions 
$width = intval($ratio*$width); // Ширина которую нужно указать в img.
$height = intval($ratio*$height); // Высота которую нужно указать в img.     
    
 // Выводим найденые совпадения, которые появятся в выпадающем списке.   
echo '

// Выводим в тегах li, так как результат будет выводиться в списке ul.
  • // Блок с картинкой.
    // Картинка.Указываем переменную где путь с картинкой и указываем переменные с шириной и высотой.
    // Блок с названием товара и ценой.
    // Название. '.$row["title"].' // Цена и Цена в долларах, просто делим цену на доллар. С помощью intval округляем.

    '.$row["price"].' руб ('.(intval($row["price"] / 30)).' $)

  • '; } while ($row = mysql_fetch_array($result)); // Цикл закончился. // Проверяем если совпадений больше Пяти, то показываем ссылку Посмотреть все результаты if (mysql_num_rows($result) > 5) { echo '
    Посмотреть все результаты →
    '; } }else{ // Если ничего не найдено, то выводим надпись. echo '
    Ничего не найдено! :\'(
    '; } }

    4HTML разметка поиска.

    
    

    5CSS стили для формы поиска.

    #block-search{
        margin: 0 auto;
        width: 423px;
        height: 33px;
    }
    // Поле поиска
    #input-search{
        height: 29px;
        width: 355px;
        border: 1px solid #D8D8D8;
        padding-left: 5px;
        padding-right: 5px;
    }
    // Изменение цвета фокуса при вводе текста.
    #input-search:focus{
        border: 1px solid #75D9FF;
    }
    // Кнопка
    #form-search{
        background: url(button-search-norm.png) no-repeat;
        width: 54px;
        height: 33px;
        border: none;
        cursor: pointer;
        position: absolute;
        margin-left: -5px;
        
    }
    // Кнопка по наведению
    #form-search:hover{
        background: url(button-search-hover.png) no-repeat;
        width: 54px;
        height: 33px;
    }
    /* Результат поиска */
    #block-search-result{
        border-left: 1px solid #E1DFDD;
        border-right: 1px solid #E1DFDD;
        border-bottom: 1px solid #E1DFDD;
        width: 419px;
        height:  auto;
        background-color: white;
        position: absolute;
        z-index: 9999;
        display: none;
    }
    #list-search-result > li{ 
        border-bottom: 1px solid #EAEAEA;
        min-height: 70px;
        height: auto;
    }
    
    .block-title-price{
        width: 325px;
        margin-left: 85px;
    }
    .block-title-price > a{
        font: 15px sans-serif;
        color: #287FC3;
        margin-top: 10px;
        display: block;  
    }
    .block-title-price > a:hover{
        text-decoration: none;  
    }
    .block-title-price > p{
        font: 15px sans-serif;
        color: black;
        margin: 10px 0;
        display: block;  
    }
    #search-noresult{
        color: #E96767;
        font: 13px sans-serif;
        margin-top: 10px;
        margin-bottom: 10px;
        display: inline-block;     
    }
    .search-result-image{
        position: absolute;
        width: 70px;
        margin-top: 10px;
        margin-left: 5px;
    }
    #search-more{
        color: #287FC3;
        font: 13px sans-serif;
        margin-top: 10px;
        margin-bottom: 10px;
        display: inline-block;    
    }
    

    Интересное

    Комментарии