САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

PHP5 Учебник

PHP Главная PHP Введение PHP Установка PHP Синтаксис PHP Переменные PHP Echo/Print PHP Типы данных PHP Строки PHP Константы PHP Операторы PHP Заявления if...else PHP Заявления switch PHP Цикл while PHP Циклы for, foreach PHP Функции PHP Массивы PHP Сортировка массивов PHP Суперглобальные массивы

PHP Формы

PHP Обработка форм PHP Проверка форм PHP Поля форм PHP Проверка почты PHP Полная форма

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

PHP Мульти массивы PHP Дата и время PHP Подключение PHP Обработка файлов PHP Открыть файл PHP Создать файл PHP Загрузить файл PHP Файлы cookie PHP Проведение сессий PHP Фильтры PHP Расширенные фильтры PHP Обработка ошибок PHP Обработка исключений

MySQL

MySQL База данных MySQL Установить MySQL Создать БД MySQL Создать таблицу MySQL Вставить данные MySQL Получить ID MySQL Вставить записи MySQL Подготовленные MySQL Выбрать данные MySQL Удалить данные MySQL Обновить данные MySQL Лимит данных

PHP - XML

PHP XML Парсер PHP XML Анализатор PHP XML Вывод PHP XML Экспат PHP XML DOM

PHP - AJAX

AJAX Введение AJAX PHP AJAX База данных AJAX XML AJAX Живой Поиск AJAX RSS Считывание AJAX Опрос

PHP Примеры

PHP Примеры

PHP5 Примеры - AJAX, Живой поиск



AJAX можно использовать для создания более удобных и интерактивных поисковых запросов.


AJAX Живой поиск

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

Живой поиск имеет много преимуществ по сравнению с традиционным поиском:

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

Найдите страницу SchoolsW3 в поле ввода ниже:

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


Объяснение примера - HTML страницы

Когда пользователь вводит символ в поле ввода выше, выполняется функция "showResult()". Функция запускается с помощью событие "onkeyup":

<html>
<head>
<script>
function showResult(str) {
 if (str.length==0) {
   document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
   return;
  }
 if (window.XMLHttpRequest) {
    // код для IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  }else {  // код для IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 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>

Объяснение исходного кода:

Если поле ввода пустое str.length==0, функция очищает содержимое заполнителя livesearch и выводит из функции.

Если поле ввода не пустое, функция showResult() выполняет следующее:

  • Создание объекта XMLHttpRequest
  • Создайте функцию, которая будет выполняться, когда ответ сервера будет готов
  • Отправить запрос в файл сервера
  • Обратите внимание, что в URL адрес добавляется параметр q (с содержимым поля ввода)

PHP файл

Страница на сервере, вызываемая 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 файла в новый объект XML DOM
  • Циклически просматривайте все элементы <title>, чтобы найти совпадения из текста, отправленного из JavaScript
  • Задает правильный url и заголовок в переменной "$response". Если найдено более одного совпадения, все совпадения добавляются в переменную
  • Если совпадений не найдено, переменной $response присваивается значение "Нет вариантов"