Поиск по сайту 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
Попробовали? Тогда переходим к разбору кода, который сегодня состоит из трех частей
- - файл 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
Колличество просмотров: 16563
|
Нравится |
Комментарии к заметке:
Комментарий добавил(а): Витя
Дата: 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 <
Вывод заработанных средств ежедневно в течении нескольких минут.
Комментарий добавил(а): Julia
Дата: 2018-01-13
Платим за лайки! - Оплата ежедневно!
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
достаточно просто зарегистрироваться на нашем сервисе. > http://click-likes.tk/ <
Вывод заработанных средств ежедневно в течении нескольких минут.
Комментарий добавил(а): Ivan
Дата: 2018-01-14
Мы платим за лайки! - Выплаты по требованию!
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
достаточно просто зарегистрироваться на нашем сервисе. > www.click-likes.tk <
Вывод заработанных средств ежедневно в течении нескольких минут.
Комментарий добавил(а): Hgvlnlt
Дата: 2018-01-14
Полный курс Bitcoin Миллионер - Успей успешно заработать!
Скоро состоится запуск новой криптовалюты с потенциалом роста в 4000%.
А это означает что вложив в нее всего 500 рублей можно увеличить капитал до 2 000 000 р.
за короткий срок. Такое уже было не один раз! Тема огонь!
Посмотрите Видео-презентацию на сайте >> http://bitcoin.exrabota.ru/ <<
Вы узнаете все о заработке на биткоин и получите купон на обучение для первых 50 человек.
Комментарий добавил(а): Vasilisa
Дата: 2018-01-14
Стабильная работа с обучением, зарплата ежедневно!
Вы работаете дома! Полностью честно и прозрачно;
Доступно для всех - неважно кто вы и какой у вас опыт работы в интернете!
Вы будете зарабатывать: свыше четырёх тысяч рублей в день!
Сложность: Несложно!
Оплата: - уже на следующий деньги у вас на счету!
Более подробная информация на нашем сайте. > www.pisma.exrabota.ru < Скопируйте и вставьте в адресную строку Вашего браузера.
Комментарий добавил(а): Tatiana
Дата: 2018-01-15
Платим за лайки! - Ежедневные выплаты!
Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
Вам достаточно просто зарегистрироваться на нашем сервисе. > www.click-likes.tk <
Вывод заработанных средств ежедневно в течении нескольких минут.
Комментарий добавил(а): Семён
Дата: 2018-01-25
Мы платим за лайки! - Оплата по требованию!
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
достаточно просто зарегистрироваться на нашем сервисе. > http://vk-like.tk/ <
Вывод заработанных средств ежедневно в течении нескольких минут.
Комментарий добавил(а): Margaret
Дата: 2018-01-26
Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.
Мы предоставляем:
- Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.
Оплата от 5500 в день. Выплаты ежедневно.
Более подробная информация на нашем сайте >> http://zakaz.exrabota.ru/ <<
Комментарий добавил(а): Jtahnfs
Дата: 2018-03-30
Мы платим за лайки! - Ежедневные выплаты!
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
достаточно просто зарегистрироваться на нашем сервисе. > www.vk-like.tk <
Вывод заработанных средств ежедневно в течении нескольких минут.
Комментарий добавил(а): Vpptrhz
Дата: 2018-04-01
Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.
Мы предоставляем:
- Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.
Оплата от 5500 в день. Выплаты ежедневно.
Более подробная информация на нашем сайте >> http://zakaz.exrabota.ru/ <<
Комментарий добавил(а): Qkdhfvy
Дата: 2018-04-03
Стабильная работа с обучением, ежедневная оплата!
Вы работаете дома! Полностью честно и прозрачно;
Доступно для всех - неважно кто вы и какой у вас опыт работы в интернете!
Вы будете зарабатывать: свыше четырёх тысяч рублей в день!
Сложность: Несложно!
Оплата: - уже на следующий деньги у вас на счету!
Ознакомтесь с условиями у нас на сайте. > pisma.exrabota.ru < Скопируйте и вставьте в адресную строку Вашего браузера.
Комментарий добавил(а): Rlxqore
Дата: 2018-04-11
Платим за лайки! - Оплата по требованию!
Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
достаточно просто зарегистрироваться на нашем сервисе. > www.vklikers.tk <
Вывод заработанных средств ежедневно в течении нескольких минут.
Добавить новый комментарий