Поиск по сайту 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
Колличество просмотров: 15945
|
|
Нравится |
Комментарии к заметке:
Комментарий добавил(а): Витя
Дата: 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 <
Вывод заработанных средств ежедневно в течении нескольких минут.
Добавить новый комментарий
