PHP - AJAX живой поиск
В этом уроке вы узнаете, как можно использовать AJAX для создания более удобного и интерактивного поиска, где результаты поиска будут отображаться, когда вы начнете вводить какой-либо символ в поле ввода поиска.
Живой поиск с помощью Ajax
В следующем примере вы можете выполнить поиск в реальном времени, получая результаты поиска сразу во время ввода текста в строку поиска.
Живой поиск, использующий Ajax, имеет ряд преимуществ по сравнению с традиционным поиском:
- Результаты поиска отображаются по мере ввода символов в строку поиска
- Результаты поиска сужаются по мере того, как вы продолжаете печатать искомый текст
- Если результаты поиска становятся слишком узкими, то удалив часть символов, вы сможете увидеть более широкий результат поиска
Чтобы сделать этот пример небольшим и простым, доступно только шесть результатов:
- Тест JavaScript
- Тест PHP
- Учебник HTML
- Учебник JavaScript
- JavaScript Функции
- JavaScript Синтаксис
Найдите одну из перечисленных выше страниц wm-school.ru в поле ввода ниже:
Введите поисковый запрос
Результаты в приведенном выше примере находятся в файле XML (links.xml).
Создание формы поиска Ajax
Теперь давайте создадим простой веб-интерфейс, который позволит пользователю выполнять поиск по названиям страниц, доступным в нашем файле XML.
Когда пользователь вводит символ в поле ввода выше, выполняется функция showResult(). Функция запускается событием onkeyup:
Пример
Попробуй сам »<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
Пояснение к коду:
- Создаём функцию showResult(str).
- Выполняем проверку наличия символов в поле ввода и если оно пустое (str.length == 0), сценарий очищает содержимое заполнителя livesearch и выходит из функции.
- Если поле ввода не пустое, функция showResult() выполняет следующее:
- Создаёт объект XMLHttpRequest
- Созда`n функцию xmlhttp.onreadystatechange, которая будет выполняться, когда будет готов ответ сервера (this.readyState==4 && this.status==200)
- Отправляет запрос в файл livesearch.php на сервере
- Обратите внимание, что к URL-адресу добавлен параметр (q) (с содержимым поля ввода)
Файл PHP для поиска в XML-файле
Страница на сервере, вызываемая выше приведенным JavaScript, представляет собой PHP-файл "livesearch.php".
Исходный код в файле "livesearch.php" ищет в XML-файле заголовки, соответствующие строке поиска, и возвращает результат в веб-браузер:
Пример
Скопировать<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//получить параметр q из URL
$q=$_GET["q"];
//искать все ссылки из файла xml, если длина q>0
if (strlen($q)>0) {
$hint="";
for($i=0; $i<($x->length); $i++) {
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1) {
//найти ссылку, соответствующую поисковому тексту
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
if ($hint=="") {
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
} else {
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Установите для вывода значение "нет предложений" , если подсказка не найдена
// или к правильным значениям
if ($hint=="") {
$response="нет предложений";
} else {
$response=$hint;
}
//вывести ответ
echo $response;
?>Пояснение к коду:
Если есть какой-либо текст, отправленный из JavaScript (strlen ($ q)> 0), происходит следующее:- Загружаем файл XML ("links.xml") в новый объект XML DOM
- Прокрутим в цикле for все элементы <title>, чтобы найти совпадения в тексте, отправленном из JavaScript.
- Устанавливаем правильный URL и заголовок в переменной $response. Если найдено более одного совпадения, все совпадения добавляются в переменную
- Если совпадений не найдено, для переменной $response устанавливается значение
"нет предложений".
