Живой поиск

Живой поиск, возможно вы уже встречались с таким понятием на некоторых сайтах. Последнее время все больше и больше сайтов используют технологии 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 Просмотров: 63881