Dalam pengembangan web modern, kemudahan input data adalah kunci untuk pengalaman pengguna yang baik. Salah satu cara paling efektif untuk mencapainya adalah dengan menggunakan fitur autocomplete pada form. Widget JQuery UI Autocomplete menyediakan cara yang cepat dan responsif untuk membantu pengguna menemukan dan mengisi data, seperti nama negara, nama produk, atau kata kunci.
Widget ini bekerja dengan mendengarkan input pengguna pada sebuah field teks, kemudian menampilkan daftar saran yang relevan secara real-time. Ini sangat berguna untuk mencegah kesalahan pengetikan dan mempercepat proses pengisian form.
Langkah 1: Mempersiapkan Struktur HTML
Untuk memulai, kita perlu sebuah elemen input teks standar dalam dokumen HTML kita. Widget Autocomplete akan diaktifkan pada elemen ini.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial JQuery UI #5: Form Autocomplete</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<h1>Form Autocomplete JQuery UI</h1>
<label for="tags">Pilih Bahasa Pemrograman:</label>
<input id="tags">
<script>
$( function() {
// Kode JQuery UI akan ditempatkan di sini
});
</script>
</body>
</html>
Langkah 2: Mengaktifkan Widget Autocomplete dengan Data Lokal
Widget Autocomplete memerlukan sumber data untuk menampilkan saran. Sumber data ini bisa berupa array lokal JavaScript atau data yang diambil dari server. Mari kita mulai dengan menggunakan data lokal.
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"Clojure",
"COBOL",
"ColdFusion",
"C++",
"C#",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
Dalam contoh di atas, kita membuat array availableTags dan menyebarkannya ke opsi source pada metode .autocomplete(). Sekarang, saat Anda mulai mengetik di field input, JQuery UI akan menampilkan daftar saran dari array ini.
Langkah 3: Menggunakan Autocomplete dengan Data dari Server (AJAX)
Dalam aplikasi nyata, data untuk autocomplete seringkali terlalu besar untuk disimpan secara lokal. JQuery UI Autocomplete dirancang untuk bekerja dengan mudah dengan data dari server menggunakan AJAX. Cukup arahkan opsi source ke URL skrip server Anda.
Struktur Server-side (Contoh PHP):
Server Anda harus merespons permintaan GET dengan mengembalikan data JSON dalam format array.
<?php
$data = array(
"ActionScript",
"AppleScript",
// ... dan seterusnya
);
$term = strtolower($_GET['term']);
$suggestions = array();
foreach ($data as $item) {
if (strpos(strtolower($item), $term) !== false) {
$suggestions[] = $item;
}
}
echo json_encode($suggestions);
?>
Struktur Client-side (JavaScript):
Di sisi klien, Anda hanya perlu memberikan URL skrip server sebagai sumber data.
$( function() {
$( "#tags" ).autocomplete({
source: "search.php" // Ganti dengan URL skrip server Anda
});
});
JQuery UI akan secara otomatis menambahkan parameter term ke permintaan URL, yang berisi teks yang sedang diketik pengguna. Ini memungkinkan server Anda untuk memfilter hasilnya dan mengembalikan hanya saran yang relevan.
Langkah 4: Menggunakan Autocomplete dengan Objek (Lebih Lanjut)
Jika Anda memerlukan lebih dari sekadar string (misalnya, ID item, deskripsi, dll.), Anda dapat menggunakan array objek sebagai sumber data. Setiap objek harus memiliki properti label (untuk ditampilkan) dan value (untuk dimasukkan ke dalam input).
var complexData = [
{ label: "JavaScript - Klien-side scripting", value: "JavaScript" },
{ label: "C++ - Bahasa C versi baru", value: "C++" },
{ label: "PHP - Hypertext Preprocessor", value: "PHP" }
];
$( "#tags" ).autocomplete({
source: complexData
});
Langkah 5: Mendengarkan Event Autocomplete
Anda dapat melampirkan event ke widget Autocomplete untuk melakukan tindakan saat interaksi tertentu terjadi, seperti saat pengguna memilih item. Event yang paling umum adalah select.
$( "#tags" ).autocomplete({
source: availableTags,
select: function( event, ui ) {
console.log( "Item yang dipilih: " + ui.item.value );
// Lakukan sesuatu dengan nilai yang dipilih
// misalnya, mengisi field lain di form
}
});
Kesimpulan
Widget Form Autocomplete JQuery UI adalah alat yang sangat efisien untuk meningkatkan kegunaan form Anda. Baik dengan data lokal yang sederhana maupun data kompleks dari server, widget ini mengurangi beban pengguna dan memastikan akurasi data. Dengan opsi kustomisasi dan kemampuan integrasi yang mudah, Anda dapat dengan cepat menerapkan fitur autocomplete yang kuat dalam aplikasi web Anda.
