По просьбе одного из пользователей я решил сделать небольшой ликбез про то как создать своего рода "Живой поиск" на php и avascript, т.е. используя систему AJAX.
Почему "своего рода", а не просто "Живой поиск" - потому как настоящий "Живой поиск" требует больше критериев для проверки запроса на стороне клиента.
Но в данном случае я решил, что достаточно будет все лишь проверки на отсутствие строки состоящей из пробелов.
Так же кто не знает, что такое "Живой поиск" - это поиск осуществляющийся без перезагрузки страницы, с незамедлительной выдачей результатов.
Первое, что мы сделаем - это создадим файлик index.php с 3-мя полями которые нам будут служить:
1. Для ввода поискового запроса (input типа text);
2. Для подсчитывания количество символов в тексте (скрытый input);
3. Для дублирования текста поискового запроса (скрытый input);
а также создаем блок div с id = search_result для результатов поиска и подключим в шапке библиотеку jquery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
<head>
<script type="text/javascript" src="http://yandex.st/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<input id="search_words" type="text" />
<input id="count_chars" type="hidden" value="0" />
<input id="re_chars" type="hidden" value="" />
<div id="search_result"> </div>
</body>
</html>
Следующим шагом будет javascript, объясню кратко логику работы скрипта. После загрузки страницы, а именно после загрузки DOM - модели страницы у нас запускается таймер который с периодичностью (сами можете указать в микросекундах) 1000 микросекунд - 1 секунда, будет запускать проверку на наличие текста в поле ввода поискового запроса. В скрытых полях с id = count_chars будет храниться количество символов введенных поле (после загрузки страницы равен 0), в поле с id = re_chars хранится копия запроса потому как только по количеству символов мы не сможем определить изменился ли запрос или нет. После изменения в поле запроса проверяется и сравнивается длина и содержимое текста с выше указанными полями, если изменился - отправляем запрос серверу.
Скрипт для обработки данных введенных в поле поиска:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
<head>
<script type="text/javascript" src="http://yandex.st/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function getSearchInput(){
var maskInput = $("#search_words").val();
var cStart = $("#count_chars").val();
var countChars = maskInput.replace(/\s+/g, "").length;
if(countChars != 0)
{
var cStartw = $("#re_chars").val();
var searchInput = $("#search_words").val();
}
else
{
var cStartw = ""
var searchInput = ""
}
if(cStart != countChars || cStartw != searchInput)
{
$("#count_chars").val(countChars);
$("#re_chars").val(searchInput);
}
}
$(document).ready(function(){
setInterval(getSearchInput,1000);
});
</script>
</head>
<body>
<input id="search_words" type="text" />
<input id="count_chars" type="hidden" value="0" />
<input id="re_chars" type="hidden" value="" />
<div id="search_result"> </div>
</body>
</html>
Дальше подготовим базу данных для поиска нужного нам значения выполнив запрос в вашем phpMyAdmin или любом другом MySQL клиенте (Естественно если вы будете использовать данную схему в реальных проектах то данные базы данных будут другие и скорее всего вам не потребуется создавать базу отдельно!!!):
CREATE DATABASE metal;
USE metal;
CREATE TABLE metal_name (name_metal VARCHAR(255));
INSERT INTO metal_name (name_metal) VALUES ('iron'),('good iron'),('bad iron'),('cloud metal'),('better metal'),('loopers'),('all metal'),('pre_metal');
Следующим шагом будет дополнение нашего файла php кодом который будет обрабатывать запрос и приведем его в такой вид:
<?php
if(isset($_GET["search_words"])){
$db_name = "metal";//Здесь название вашей базы данных
$db_user = "a";//Здесь имя пользователя базы данных
$db_password = "a";//Здесь пароль вашего пользователя
$db_host = "localhost";//Здесь хост или IP адрес серевера MySQL
$html = "";
$search_words = $_GET["search_words"];
if(!mysql_connect($db_host,$db_user,$db_password))
exit("NO CONNECT TO MYSQL");
$db = mysql_select_db($db_name);
$query = "SELECT * FROM metal_name WHERE name_metal LIKE '%{$search_words}%'";
$pre_result = mysql_query($query);
while($result = mysql_fetch_assoc($pre_result)){
$result = str_replace($search_words,"<b><i>".$search_words."</i></b>",$result["name_metal"]);
$html .= "<p>".$result."</p>";
}
echo !empty($html)?$html:"No result";
}
else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
<head>
<script type="text/javascript" src="http://yandex.st/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function getSearchInput(){
var maskInput = $("#search_words").val();
var cStart = $("#count_chars").val();
var countChars = maskInput.replace(/\s+/g, "").length;
if(countChars != 0)
{
var cStartw = $("#re_chars").val();
var searchInput = $("#search_words").val();
}
else
{
var cStartw = "";
var searchInput = "";
}
if(cStart != countChars || cStartw != searchInput)
{
$("#count_chars").val(countChars);
$("#re_chars").val(searchInput);
}
}
$(document).ready(function(){
setInterval(getSearchInput,1000);
});
</script>
</head>
<body>
<input id="search_words" type="text" />
<input id="count_chars" type="hidden" value="0" />
<input id="re_chars" type="hidden" value="" />
<div id="search_result"></div>
</body>
</html>
<?php } ?>
Ну и на конец добавим javascript AJAX запрос который будет выгружать результат на страницу:
$("#search_result").load("index.php?search_words=" + searchInput);
В итоге имеем файл с таким содержимым:
<?php
if(isset($_GET["search_words"])){
$db_name = "metal";//Здесь название вашей базы данных
$db_user = "a";//Здесь имя пользователя базы данных
$db_password = "a";//Здесь пароль вашего пользователя
$db_host = "localhost";//Здесь хост или IP адрес серевера MySQL
$html = "";
$search_words = $_GET["search_words"];
if(!mysql_connect($db_host,$db_user,$db_password))
exit("NO CONNECT TO MYSQL");
$db = mysql_select_db($db_name);
$query = "SELECT * FROM metal_name WHERE name_metal LIKE '%{$search_words}%'";
$pre_result = mysql_query($query);
while($result = mysql_fetch_assoc($pre_result)){
$result = str_replace($search_words,"<b><i>".$search_words."</i></b>",$result["name_metal"]);
$html .= "<p>".$result."</p>";
}
echo !empty($html)?$html:"No result";
}
else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
<head>
<script type="text/javascript" src="http://yandex.st/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function getSearchInput(){
var maskInput = $("#search_words").val();
var cStart = $("#count_chars").val();
var countChars = maskInput.replace(/\s+/g, "").length;
if(countChars != 0)
{
var cStartw = $("#re_chars").val();
var searchInput = $("#search_words").val();
}
else
{
var cStartw = "";
var searchInput = "";
}
if(cStart != countChars || cStartw != searchInput)
{
$("#search_result").load("index.php?search_words=" + searchInput);
$("#count_chars").val(countChars);
$("#re_chars").val(searchInput);
}
}
$(document).ready(function(){
setInterval(getSearchInput,1000);
});
</script>
</head>
<body>
<input id="search_words" type="text" />
<input id="count_chars" type="hidden" value="0" />
<input id="re_chars" type="hidden" value="" />
<div id="search_result"></div>
</body>
</html>
<?php } ?>
Это не идеальный код для "Живого поиска" - но мои заказчики и пользователи остались довольны!
Комментарии
Но ваш код исполняется постоянно, как сделать чтобы он выполнялся только по изменению текста в инпут? Спасибо
Другой вариант - это мониторинг событий, а именно событий нажатия клавиш! Если вам нужен данный функционал с радостью вам помогу!
Допилил, использую, спасибо.
Ну Вы бы поделились правильным кодом. Спасибо
В примере уже исправленный код!
2. SQL запрос выполнили?
3. Файл навали index.php?
4. Что пишет консоль браузера?
То что надо!