PHP - Carian Auto Complete

Pengenalan

Hai sana! Selamat datang ke perjalanan kami ke dalam dunia pemrograman dengan PHP dan AJAX. Hari ini, kita akan mendalami pembuatan ciri carian auto-complete menggunakan PHP dan AJAX. Panduan ini dicipta untuk pemula yang tidak mempunyai pengalaman terdahulu dalam pemrograman. Jadi, mari kita mulakan!

PHP - AJAX Auto Complete Search

Dokumen XML

Sebelum kita dapat membuat ciri carian auto-complete, kita perlu mengatur dokumen XML yang akan menjadi sumber data kita. Dokumen XML adalah koleksi data yang disimpan dalam format terstruktur yang dapat dibaca dengan mudah oleh manusia dan mesin. Dalam kes ini, dokumen XML kita akan mengandungi senarai bandar di seluruh dunia.

<?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>

Simpan dokumen XML ini sebagai cities.xml dalam direktori yang sama seperti fail PHP anda.

Kod JavaScript

Sekarang kita telah siapkan dokumen XML, mari kita menulis sedikit kod JavaScript untuk mengambil data dari dokumen XML dan menunjukkankannya dalam senarai dropdown apabila pengguna mula menaip dalam kotak carian. Kita akan menggunakan AJAX untuk mencapai ini tanpa memuat semula halaman.

Pertama, mari kita buat suatu borang HTML dengan kotak carian dan senarai dropdown:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Auto Complete Search</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>

Seterusnya, mari kita tulis kod JavaScript dalam fail terpisah yang dipanggil 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();
}
}

Dalam kod ini, kita tentukan fungsi yang dipanggil showSuggestions yang mengambil string sebagai input. Apabila pengguna menaip sesuatu di kotak carian, fungsi ini dipanggil dengan nilai input. Jika panjang input adalah nol, kita kosongkan senarai cadangan. Sebaliknya, kita buat objek XMLHttpRequest untuk menghantar permintaan AJAX ke fail PHP dipanggil get_suggestions.php dengan parameter query q di set ke nilai input.

Kod PHP

Sekarang, mari kita pindah ke bahagian PHP. Kita akan membuat fail dipanggil get_suggestions.php yang akan mengendalikan permintaan AJAX dan mengembalikan nama bandar yang sepadan sebagai senarai 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>';
?>

Dalam kod PHP ini, kita pertama-tama muat dokumen XML menggunakan fungsi simplexml_load_file. Kemudian, kita lakukan pengulangan bagi setiap bandar dalam dokumen XML dan periksa jika rentetan query dapat ditemui dalam nama bandar (tidak mengira kesan huruf). Jika padanan ditemui, kita tambah bandar ke array $matchingCities. Akhirnya, kita output senarai tak terurut (<ul>) yang mengandungi nama bandar sepadan sebagai item senarai (<li>).

Itu saja! Anda kini mempunyai ciri carian auto-complete asas menggunakan PHP dan AJAX. Ingat untuk meletakkan semua tiga fail (index.html, autocomplete.js, dan get_suggestions.php) dalam direktori yang sama dan buka index.html dalam pelayar web untuk melihat kotak carian dalam tindakan.

Sementara anda teruskan perjalanan anda dalam pemrograman, anda akan mendapati terdapat banyak cara untuk implementasi ciri auto-complete, seperti menggunakan kerangka kerja seperti React atau Angular, atau bahkan menggunakan pustaka frontend modern seperti Vue.js atau Svelte. Tetapi untuk sekarang, contoh mudah ini sepatutnya memberikan anda asas kuat untuk dibangunkan.

Selamat pemrograman!

Credits: Image by storyset

Tutorial Sebelumnya:

PHP - Penyongsang XML AJAX

Tutorial Seterusnya:

PHP - Contoh Feed RSS AJAX