Поиск по сайту jQuery + AJAX + PHP + MySQL


Поиск по сайту  jQuery + AJAX + PHP + MySQL

Доброго и удачного всем дня, здравствуйте. В сегодняшней статье я как и обещал покажу как усовершенствовать поиск по сайту разобранный в статье "Поиск по сайту AJAX + PHP + MySQL (AJAX)".

А поможет нам в этом библиотека jQuery с помощью которой мы будем посылать AJAX запрос серверу.

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

Сформулируем стоящую перед нами задачу:

С помощью библиотеки jQuery cформировать POST запрос, который AJAX - ом передается на сервер, где в PHP скрипте он обрабатывается и формируется запрос к базе данных MySQL. Полученные от сервера Mysql результаты необходимо подвергнуть некоторой обработке. Я хочу "подсветить" поисковый запрос в поисковой выдаче , оформить результаты поисковой выдачи в виде ссылок и придать некоторое форматирование HTML тегами.

Еще одно маленькое но очень важное замечание! Библиотеку jQuery я буду подключать с помощью скрипта JavaScript из Google-хранилища. В одной и следующих статей я непременно расскажу вам что это такое.

Опять же идя по пути наименьшего сопротивления я буду модернизировать пред идущие скрипты. Единственное, что я рекомендую непременно сделать, так это разнести по разным файлам скрипт обработчик PHP, конфигурационный файл подключения к базе данных MySQL, стили CSS и код HTML. Я сделал именно так.

Вот что у меня получилось:

Поиск по сайту jQuery + AJAX + PHP + MySQL


Поиск по сайту jQuery + AJAX + PHP + MySQL



Попробовали? Тогда переходим к разбору кода, который сегодня состоит из трех частей

  • - файл c кодом HTML и JavaScript
  • - файл со стилями find.css
  • - файл скрипта обработчика find_jQuery.php

Код JavaScript:


Свернуть код:
<link rel="stylesheet" type="text/css" href="find.css">
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
    $("#txtTitle").keyup(function() {
        // получаем то, что написал пользователь
        var searchString    = $("#txtTitle").val();
        // формируем строку запроса
        var data = 'query='+ searchString;
        // если searchString не пустая
        if(searchString) {
            // делаем ajax запрос
            $.ajax({
                type: "POST",
                url: "find_jQuery.php",
                data: data,
                // выполнится  до AJAX запроса
                beforeSend: function(html) { 
                    $("#divResult").html('');
                    $("#search").show();
                    $("#span").html(searchString);
               },
               // выполнится после AJAX запроса
               success: function(html){ 
                    $("#divResult").show();
                    $("#divResult").append(html);
              }
            });
        }
        return false;
    });
});
</script>

И код HTML:


Свернуть код:
<h3 style="text-align:center;">Поиск по сайту AJAX + PHP + MySQL</h3><br />
 <div id="form">
  <form method="post" action="find_jQuery.php" onsubmit="return false">
   <fieldset style="width: 350px; text-align:center; margin: 0 auto; ">
    <legend>Поиск по сайту AJAX + PHP + MySQL</legend><br />
     <div>
      <label for="txtTitle">Поисковый запрос</label>
      <input id="txtTitle" type="text" placeholder="Введите запрос" />
      <input type="submit" value="Поиск" class="search_button" /><br />
    </div><br />
   </fieldset>
  </form>
  <div id="search">Результаты для <span id="span"></span>:</div>
  <div id="divResult"></div>
 </div>

Код со стилями CSS


Свернуть код:
body{ font-family:Arial, Helvetica, sans-serif; }
*{ margin:0;padding:0; }
#form { margin: 0 auto; padding: 10px; width: 600px; 
  border:2px solid blue; background: #55a1e0; }
#divResult a { color:#1D5895; text-decoration:none; font-style: italic; }
#divResult a:hover { color:#ff0000; text-decoration:underline; }
#search { text-align:left; margin:20px 0 10px; display:none; }
#divResult p { padding-bottom:10px; }
#span { font-weight:bold; }
.found { font-weight: bold; font-style: italic; color: red; }

и файл find_jQuery.php:


Свернуть код:
<?php 
include bd.php";  //Соединяемся с базой

/*Обработка поискового запроса*/
function search ($query) { 
  $text = '';
  // Проводим фильтрацию данных
  $query = trim($query); // Обрезаем пробелы и спецсимволы
  $query = mysql_real_escape_string($query); // Фильтруем текст
  $query = htmlspecialchars($query); // Переводим 

  //Поисковый запрос не пустой?
  if (!empty($query)){ 
    if (strlen($query) < 4) {
      $text = '<p>короткий поисковый запрос.</p>';
    } elseif (strlen($query) > 128) {
      $text = '<p>длинный поисковый запрос.</p>';
    } else {
      //Формируем строку поискового запроса 
      $sql = "SELECT 
               `title`, `description`, `link`
              FROM 
               `name_table` 
              WHERE 
               `description` LIKE '%$query%'
              OR 
               `title` LIKE '%$query%'";
      // и выполняем его
      $result = mysql_query($sql);
      //Если число совпадений (строк результата запроса) больше 0 
      if ( $num = mysql_num_rows($result) > 0) { 
        //Получаем ассоциативный массив
        $row = mysql_fetch_assoc($result); 
        //и начинаем формировать строку поисковой выдачи
        do {
          //Продолжаем  формировать строку поисковой выдачи
          $text .= '<p><a class="classic" 
            href="http://hochuwebsite.ru/view_post/'.$row['link'].'">'
            .$row['title'].'</a><br />'.$row['description'].'</p>';
          // Делаем это пока у нас есть результаты											
        } while ($row = mysql_fetch_assoc($result)); 
        // Выделяем поисковый запрос
        $bold = '<span class="found">' . $query . '</span>';
        $text =  str_ireplace($query, $bold, $text);
      } else {
       // Найти совпадение не удалось 
       $text = '<p>По вашему запросу ничего не найдено.</p>';
      }
    } 
  } else {
    $text = '<p>Задан пустой поисковый запрос.</p>';
  }
  //Возвращаем сформированную строку поисковой выдачи
  return $text; 
} 
if (isset ($_POST['query']) && !empty($_POST['query'])){ 
// Открываем соединение с базой данных
// и обращаемся к функции search()
$search_result = search ($_POST['query']); 
echo $search_result; 
}
?>

Давайте разберем теперь размещенные выше коды.

На коде HTML я останавливаться не буду, так как в нем ничего сложного нет, а вот листинг с кодом JavaScript давайте рассмотрим по подробнее.

Сначала явно указываем откуда загружать используемые стили CSS. Потом коротким скриптом прописываем путь для загрузки библиотеки jQuery из Google - хранилища.

<link rel="stylesheet" type="text/css" href="/script/find.css">
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

А дальше начинается самое интересное - начинает работать библиотека jQuery. Когда объектная модель документа готова к использованию запускается функция библиотеки jQuery - $(function() {...}); - в которой отслеживается изменение в теге с идентификатором id="txtTitle" и формируется строка запроса

  $("#txtTitle").keyup(function() {
    // получаем то, что написал пользователь
    var searchString    = $("#txtTitle").val();
    // формируем строку запроса
    var data = 'query='+ searchString;

Если строка запроса не пустая - выполняем AJAX запрос в котором указываем метод передачи данных на сервер - POST, путь к скрипту обработчику и данные - то есть сформированную строку запроса.
  // если searchString не пустая
  if(searchString) {
    // делаем ajax запрос
    $.ajax({
    type: "POST",
    url: "find_jQuery.php",
    data: data,

Причем у нас есть возможность указать функции которые выполнятся до и после выполнения AJAX запроса.

  // выполнится  до AJAX запроса
  beforeSend: function(html) { 
    $("#divResult").html('');
    $("#search").show();
    $("#span").html(searchString);
  },
  // выполнится после AJAX запроса
  success: function(html){ 
    $("#divResult").show();
    $("#divResult").append(html);
  }

Так, до запроса очищаются ранее полученные данные у тега с id="divResult", в нашем случае тег div, показывается первоначально скрытая с помощью стилей CSS информация в теге с id="search" а в тег с id="span" добавляется поисковый запрос.

А после выполнения AJAX запроса в теге с id="divResult" будет находится полученная поисковая выдача.

Cтили CSS я оставляю вам для самостоятельного разбора, так как ничего сложного в них нет.

Да и про код скрипта PHP мне рассказать вам особо нечего - все это было подробно рассмотрено ранее.

Я лишь вынес подключение к базе данных рассмотренное статье "Поиск по сайту AJAX + PHP + MySQL (PHP + MySQL)" в отдельный конфигурационный файл и добавил в то что осталось всего пару строк, в которых с помощью функции str_ireplace() я заменяю в поисковой выдаче текст поискового запроса на такой же, но только подсвеченный стилями CSS

include bd.php";  //Соединяемся с базой
.
.
.
// Выделяем поисковый запрос
$bold = '<span class="found">' . $query . '</span>';
$text =  str_ireplace($query, $bold, $text);

Сравните получившийся у нас код JavaScript c кодами из статьи "Поиск по сайту AJAX + PHP + MySQL (AJAX)". Не правда ли ощутимое сокращение размера при значительном увеличении возможностей?

В следующих статьях я планирую подробнее рассказать о передаче AJAX запроса с помощью библиотеки jQuery, и о других возможностях этой замечательной библиотеки.

А на этом сегодня все, как обычно с удовольствием отвечу на ваши вопросы. До свидания.

Автор: Сергей Зарубин

Дата: 2012-07-07

Колличество просмотров: 14109

Нравится

Комментарии к заметке:

Комментарий добавил(а): Витя
Дата: 2012-07-12

Спасибо!!!!

Комментарий добавил(а): Администратор
Дата: 2012-10-03

не ок помойму

Комментарий добавил(а): Дмитрий
Дата: 2013-03-28

Кто нибудь поможет разобраться с возникнувшей проблемой?

Комментарий добавил(а): Михаил
Дата: 2013-04-21

Эта тема не канает. После вставки javascript в тело html-документа - документ не грузится. Просто висит белая страница. Видимо где-то ошибка.

Комментарий добавил(а): Михаил
Дата: 2013-04-22

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

Комментарий добавил(а): Михаил
Дата: 2013-04-22

А здешний поиск, кстати, тоже регистр не выделяет!

Комментарий добавил(а): Сергей Зарубин
Дата: 2013-04-22

Может быть вот этот SQL запрос натолкнет вас на решение проблемы регистронезависимого поиска:
"SELECT * FROM table WHERE LOWER(field)='{strtolower($query)}'";

Комментарий добавил(а): Валерий
Дата: 2013-05-20

Хотелось бы, что бы автор в конце статей выкладывал ссылки на готовые скрипты) Читатели оценят!

Комментарий добавил(а): Андрей
Дата: 2013-07-12

К примеру после того, когда ввел запрос появились результаты, нажать "Backspace" и обратно ввести символ который стерся - результаты дублируются, как решить? спасибо...

Комментарий добавил(а): Павел
Дата: 2013-11-12

Поиск не канает для серьезных проектов. Попробуйте ввести class в поисковую строку в демо. Если у вас результаты в span введите span. (выводит часть кода) Лучше использовать онклик.

Комментарий добавил(а): xenia
Дата: 2017-11-19

Мы платим за лайки! - Ежедневные выплаты!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.like.exrabota.ru <

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



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


Введите число с картинки:

captcha