PHP - Pencarian Otomatis Auto Complete

Pengenalan

Hai sana! Selamat datang ke perjalanan kita ke dunia pemrograman dengan PHP dan AJAX. Hari ini, kita akan mendalami membuat fitur pencarian otomatis menggunakan PHP dan AJAX. Panduan ini dirancang untuk pemula yang belum memiliki pengalaman sebelumnya dalam pemrograman. Jadi, mari kita mulai!

PHP - AJAX Auto Complete Search

Dokumen XML

Sebelum kita dapat membuat fitur pencarian otomatis, 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 hal ini, dokumen XML kita akan berisi daftar kota 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 di dalam direktori yang sama dengan file PHP Anda.

Kode JavaScript

Sekarang kita memiliki dokumen XML siap, mari kita menulis kode JavaScript untuk mengambil data dari dokumen XML dan menampilkanannya dalam daftar dropdown saat pengguna mulai mengetik dalam kotak pencarian. Kita akan menggunakan AJAX untuk mencapai ini tanpa memuat ulang halaman.

Pertama, mari kita buat formulir HTML dengan kotak pencarian dan daftar dropdown:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Pencarian Otomatis</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>

Selanjutnya, mari kita tulis kode JavaScript dalam file terpisah yang dinamai 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 kode ini, kita mendefinisikan fungsi showSuggestions yang menerima string sebagai input. Saat pengguna mengetik sesuatu dalam kotak pencarian, fungsi ini dipanggil dengan nilai input. Jika panjang input adalah nol, kita kosongkan daftar saran. Jika tidak, kita membuat objek XMLHttpRequest untuk mengirim permintaan AJAX ke file PHP yang dinamai get_suggestions.php dengan parameter q diatur ke nilai input.

Kode PHP

Sekarang, mari kita pindah ke sisi PHP. Kita akan membuat file get_suggestions.php yang akan menangani permintaan AJAX dan mengembalikan nama kota yang cocok sebagai daftar 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 kode PHP ini, kita pertama-tama memuat dokumen XML menggunakan fungsi simplexml_load_file. kemudian, kita perulang setiap kota dalam dokumen XML dan memeriksa apakah string pencarian ditemukan dalam nama kota (tanpa memperhatikan kepekaan huruf). Jika cocok ditemukan, kita menambahkan kota ke array $matchingCities. Akhirnya, kita mengoutputkan daftar tak terurut (<ul>) yang berisi nama kota yang cocok sebagai item daftar (<li>).

Itu saja! Anda sekarang memiliki fitur pencarian otomatis dasar menggunakan PHP dan AJAX. Ingat untuk menempatkan semua tiga file (index.html, autocomplete.js, dan get_suggestions.php) di dalam direktori yang sama dan buka index.html di browser untuk melihat kotak pencarian dalam aksi.

Saat Anda terus melanjutkan perjalanan Anda dalam pemrograman, Anda akan menemukan bahwa ada banyak cara untuk implementasi fitur pencarian otomatis, seperti menggunakan kerangka kerja seperti React atau Angular, atau bahkan menggunakan pustaka frontend modern seperti Vue.js atau Svelte. Tetapi untuk sekarang, contoh sederhana ini seharusnya memberikan Anda dasar yang kuat untuk dibangun.

Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

PHP - Analis XML AJAX

Tutorial Selanjutnya:

PHP - Contoh Feed RSS AJAX