PHP Учебник

PHP Старт Введение в PHP Установка PHP Синтаксис PHP Комментарии в PHP Переменные PHP PHP Echo / Print Типы данных PHP Строки PHP Числа PHP Математика в PHP Константы PHP Операторы PHP PHP If...Else...Elseif PHP Switch Циклы в PHP Функции PHP Массивы PHP PHP Суперглобальные PHP RegEx

PHP Формы

Обработка форм PHP Валидация форм PHP Обязательные поля Валидация URL/E-mail Полная форма PHP

PHP Продвинутый

PHP Дата и время PHP Include/Require PHP Работа с файлами Открытие/Чтение файлов Создание/Запись файлов PHP Загрузка файлов Файлы cookie PHP Сессии PHP Фильтры PHP Расширенные фильтры PHP Функция Callback PHP JSON PHP Исключения

PHP OOP

Что такое ООП в PHP Классы/Объекты PHP Цепочки методов PHP Конструктор PHP Деструктор PHP Модификаторы доступа Наследование в PHP Константы класса PHP Подсказка типов PHP Подсказка интерфейсов Абстрактные классы PHP PHP Интерфейсы PHP Полиформизм PHP Трейты Статические методы PHP Статические свойства PHP Пространства имен PHP Итерируемые объекты

База данных MySQL

База данных MySQL Подключение к MySQL Создание БД MySQL Создание таблицы MySQL Вставка данных MySQL Получить ID MySQL Подготовленные операторы PHP MySQL Получение данных MySQL Предложение WHERE Предложение ORDER BY Обновление данных MySQL Удаление данных БД MySQL Limit Data

PHP XML

Парсеры PHP XML Парсер PHP SimpleXML Получить PHP SimpleXML PHP XML Expat PHP XML DOM

PHP - AJAX

AJAX Введение AJAX PHP AJAX База Данных AJAX XML AJAX Живой поиск AJAX Опрос

PHP Примеры

PHP Примеры Практика ООП PHP PHP квиз-тест Упражнения Базовый PHP Упражнения Алгоритмы Упражнения Массивы Упражнения Цикл for Упражнения Функции Регулярные выражения Упражнения Дата PHP Упражнения Строки PHP Математика PHP Упражнения Формы PHP Упражнения Классы PHP Упражнения JSON PHP PHP Задачник


PHP - AJAX живой поиск




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


В следующем примере вы можете выполнить поиск в реальном времени, получая результаты поиска сразу во время ввода текста в строку поиска.

Живой поиск, использующий Ajax, имеет ряд преимуществ по сравнению с традиционным поиском:

  1. Результаты поиска отображаются по мере ввода символов в строку поиска
  2. Результаты поиска сужаются по мере того, как вы продолжаете печатать искомый текст
  3. Если результаты поиска становятся слишком узкими, то удалив часть символов, вы сможете увидеть более широкий результат поиска

Чтобы сделать этот пример небольшим и простым, доступно только шесть результатов:

  1. Тест JavaScript
  2. Тест PHP
  3. Учебник HTML
  4. Учебник JavaScript
  5. JavaScript Функции
  6. JavaScript Синтаксис

Найдите одну из перечисленных выше страниц wm-school.ru в поле ввода ниже:

Введите поисковый запрос

Результаты в приведенном выше примере находятся в файле XML (links.xml).


Теперь давайте создадим простой веб-интерфейс, который позволит пользователю выполнять поиск по названиям страниц, доступным в нашем файле 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() выполняет следующее:
    1. Создаёт объект XMLHttpRequest
    2. Созда`n функцию xmlhttp.onreadystatechange, которая будет выполняться, когда будет готов ответ сервера (this.readyState==4 && this.status==200)
    3. Отправляет запрос в файл livesearch.php на сервере
    4. Обратите внимание, что к URL-адресу добавлен параметр (q) (с содержимым поля ввода)

Страница на сервере, вызываемая выше приведенным 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 устанавливается значение "нет предложений".




Профессия‌ ‌PHP-разработчик‌ Совет эксперта
Освойте PHP и MySQL с нуля в игровой форме
Профессия‌ ‌PHP-разработчик‌ Совет эксперта
На рынке не хватает веб-разработчиков
Профессия‌ ‌PHP-разработчик‌
На рынке не хватает веб-разработчиков
Профессия‌ ‌PHP-разработчик‌ Совет эксперта
Освойте популярный PHP-фреймворк
Профессия‌ ‌PHP-разработчик‌ Совет эксперта
На рынке не хватает fullstack-разработчиков!
PHP-разработчик с нуля до PRO
Обучение в рассрочку
Профессия‌ ‌PHP-разработчик‌ Совет эксперта
Учитесь сейчас, платите потом!
Профессия‌ ‌PHP-разработчик‌ Выберите специальность
Учитесь сейчас, платите потом!