Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по AJAX / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Живой поиск

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

Подключаем фреймворк jquery, если он еще не подключен. Далее у нас будет простая форма всего с одним полем. Именно в нем мы будем отслеживать изменение поискового запроса и сразу же отображать нужный результат.

<form action="search.php" method="post" name="form" onsubmit="return false;">
  <p>

    Живой поиск:<br>
    <input
name="search" type="text" id="search">
    <small>
Вводите на английском языке</small>
  </p>
</form>

Сразу за формой разместим блок, в котором будут отображаться результаты поиска

<div id="resSearch">Начните вводить запрос</div>

Теперь посмотрим основную часть кода. Как ни странно, но она очень простая и представляет всего несколько строк кода:

<script type="text/javascript">
$(function(){
  $("#search").keyup(function(){
     var search = $("#search").val();
     $.ajax({
       type: "POST",
       url: "search.php",
       data: {"search": search},
       cache: false,                                
       success: function(response){
          $("#resSearch").html(response);
       }
     });
     return false;
   });
});
</script>

Как видите все довольно просто. Мы просто отслеживаем любое изменение содержимого в поле с id=search, получаем это значение и отправляем нашему обработчику search.php, производящий собственно сам поиск. Далее любой результат, который мы получили от обработчика мы просто выводим в блок с id=research.

Теперь поговорим, как устроен обработчик. Как правило, поиск производится по базе данных, но в примере мы будем искать в массиве название стран (в исходниках приведен код для поиска по базе данных).  Не забывайте о том, что когда поиск производится по базе данных, то у поля, по которому мы ищем должен быть режим «полный текст».

<?php
header("Content-type: text/html; charset=windows-1251");
$search = $_POST['search'];
$search = addslashes($search);
$search = htmlspecialchars($search);
$search = stripslashes($search);
   if($search == ''){
      exit("Начните вводить запрос");
   }
$db = mysql_connect("localhost","user","password");
mysql_select_db("basa",$db);
mysql_query("SET NAMES cp1251");
               
$query = mysql_query("SELECT * FROM table WHERE MATCH(text) AGAINST('$search')",$db);
if(mysql_num_rows($query) > 0){
   $sql = mysql_fetch_array($query);
   do{
     echo "<div>".$sql['text']."</div>";
   }while($sql = mysql_fetch_array($query));
}else{
   echo "Нет результатов";
}
?>

После поиска в нем формируется результаты поиска уже с готовой html разметкой именно это и возвращаются в качестве ответа и выводятся в блок research.

Ну вот собственно и весь урок, надеюсь что все было понятно и вы найдете этому применение.

Автор: Евгений Бочкарев Урок добавлен: 29 Февраля 2012 в 19:56 Просмотров: 52989

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (29)

#30 Виктор 23-10-2014 в 09:16
Язык любой можно настроить в подключаемом файле "search.php". Но как защитить от чтения всех данных можно этот файл кто-нить знает? Его легко можно увидеть через фаирбаг. Только на php писать подключение?
#31 Андрей 25-10-2014 в 23:37
Пример не плохой, но подходит для сайтов с малой посещаемостью, как быть если такие запросы делают десятки тысяч пользователей одновременно?
#32 Sergio 19-12-2014 в 11:24
Простите, а как сделать так чтобы вниз можно было кнопку нажать и перемещатсья по списку? я думаю это очень даже востребовано всем! юзабилити.
#33 Ирина 20-12-2014 в 12:59
Да согласна с сержио. Не работает возможность нажимать на клавиатуре кнопку ВНИЗ! Этого так хочется!!!)
#34 Руслан 12-01-2015 в 15:42
Здесь есть админы?
#35 витя 20-03-2015 в 22:10
у меня есть сайт который написан на asp.net. хочу на сайте поставить живой поиск. можете помочь как мне это сделать?
#36 v97@rambler.ru 26-03-2015 в 23:07
Подскажите, а как сделать, чтобы блок с результатами поиска вылезал как бы над остальным дизайном, а не отодвигал все вниз?
#37 vadim 30-03-2015 в 17:24
Классный сайт! Спасибо разработчикам
#38 Mahkamov4th 11-11-2016 в 15:59
Доброе время суток, я думаю сделал все так как тут написана, но у меня выводит ошибку типа
mysql_num_rows() expects parameter 1 to be resource, boolean given in C:\home\localhost\www\liveSearch\search.php on line 292
что делать?
#39 Alex 01-12-2016 в 11:28
У меня ищет только слово целиком, а у вас в примере ищет посимвольно. В чем может быть причина?
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки