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