PHP - AJAX Автоматический поиск
Введение
Здравствуйте! Добро пожаловать в наше путешествие в мир программирования с использованием PHP и AJAX. Сегодня мы погрузимся в создание функции автоматического поиска с использованием PHP и AJAX. Этот урок предназначен для начинающих, у которых нет опыта в программировании. Итак, lets get started!
XML документ
Before мы можем создать нашу функцию автоматического поиска, мы должны настроить XML документ, который будет служить是我们的 источником данных. XML документ - это коллекция данных, хранящихся в структурированном формате, который легко читается как людьми, так и машинами. В этом случае наш XML документ будет содержать список городов по всему миру.
<?xml version="1.0" encoding="UTF-8"?>
<cities>
<city>New York</city>
<city>Los Angeles</city>
<city>Chicago</city>
<city>Houston</city>
<city>Phoenix</city>
<city>Philadelphia</city>
<city>San Antonio</city>
<city>San Diego</city>
<city>Dallas</city>
<city>San Jose</city>
</cities>Сохраните этот XML документ как cities.xml в той же директории, что и ваш PHP файл.
JavaScript код
Теперь, когда у нас готов XML документ, давайте напишем JavaScript код для извлечения данных из XML документа и отображения их в выпадающем списке при начале ввода пользователем в搜索 box. Мы будем использовать AJAX для достижения этого без перезагрузки страницы.
First, давайте создадим HTML форму с поисковой строкой и выпадающим списком:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Автоматический поиск</title>
</head>
<body>
<form id="searchForm">
<input type="text" id="searchBox" onkeyup="showSuggestions(this.value)">
<select id="suggestionList"></select>
</form>
<script src="autocomplete.js"></script>
</body>
</html>Next, давайте напишем JavaScript код в отдельном файле под названием autocomplete.js:
function showSuggestions(str) {
if (str.length == 0) {
document.getElementById("suggestionList").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("suggestionList").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "get_suggestions.php?q=" + str, true);
xmlhttp.send();
}
}В этом коде мы определяем функцию под названием showSuggestions, которая принимает строку в качестве входных данных. Когда пользователь что-то набирает в��索 box, эта функция вызывается с значением ввода. Если длина ввода равна нулю, мы очищаем список предложений. В противном случае, мы создаем объект XMLHttpRequest для отправки AJAX запроса в PHP файл под названием get_suggestions.php с параметром запроса q, установленным в значение ввода.
PHP код
Теперь перейдем к PHP стороне вопроса. Мы создадим файл под названием get_suggestions.php, который будет обрабатывать AJAX запрос и возвращать соответствующие имена городов в виде HTML списка:
<?php
$query = $_GET['q'];
$xml = simplexml_load_file('cities.xml');
$matchingCities = array();
foreach ($xml->city as $city) {
if (strpos(strtolower($city), strtolower($query)) !== false) {
$matchingCities[] = $city;
}
}
echo '<ul>';
foreach ($matchingCities as $city) {
echo '<li>' . $city . '</li>';
}
echo '</ul>';
?>В этом PHP коде мы сначала загружаем XML документ с помощью функции simplexml_load_file. Затем мы循环 по каждому городу в XML документе и проверяем, содержится ли строка запроса в названии города (игнорируя регистр). Если совпадение найдено, мы добавляем город в массив $matchingCities. Наконец, мы выводим unordered list (<ul>) с соответствующими названиями городов в виде list items (<li>).
Вот и все! Теперь у вас есть базовая функция автоматического поиска с использованием PHP и AJAX. Не забудьте поместить все три файла (index.html, autocomplete.js, и get_suggestions.php) в одну директорию и открыть index.html в веб-браузере, чтобы увидеть搜索 box в действии.
Пока вы продолжаете свое путешествие в программировании, вы обнаружите, что есть множество способов реализации функций автоматического поиска, таких как использование фреймворков, таких как React или Angular, или даже использование современных фронтенд библиотек, таких как Vue.js или Svelte. Но пока этот простой пример должен дать вам прочную основу для дальнейшего развития.
Счастливого кодирования!
Credits: Image by storyset