Autocomplete adalah fitur yang memberikan sugesti data saat user mengetik di kolom input, mirip seperti saran pencarian di Google. Fitur ini mempercepat proses input dan mengurangi kesalahan ketik.
Tutorial ini membahas cara membuat autocomplete menggunakan plugin jQuery Autocomplete dalam dua pendekatan: data statis tanpa database, dan data dinamis yang diambil dari database PHP MySQLi.
Persiapan
Download kedua library berikut sebelum mulai:
- jQuery — library JavaScript utama
- jQuery Autocomplete v1.4.11 — plugin autocomplete oleh Devbridge Group
Buat folder baru bernama latihan di dalam htdocs, lalu copy kedua file library (jquery.min.js dan jquery.autocomplete.min.js) ke dalamnya.
Autocomplete tanpa database (data statis)
Pada pendekatan ini, data sugesti ditulis langsung di JavaScript — cocok untuk data yang tidak sering berubah.
Langkah 1: Buat struktur HTML
Buat file baru bernama autocomplete-statis.html di dalam folder latihan, lalu isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
<title>Autocomplete Input Tanpa Database</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<h3>Autocomplete Input Tanpa Database</h3>
<form action="" method="post">
<input type="text" id="buah" name="buah" placeholder="Nama Buah">
</form>
</div>
</body>
</html>Langkah 2: Tambahkan CSS
Tambahkan kode CSS berikut tepat di atas tag </head>:
<style>
body {
font-family: 'Roboto', Arial, Sans-serif;
font-size: 15px;
font-weight: 400;
}
.container {
left: 50%;
position: absolute;
top: 7.5%;
transform: translate(-50%, -7.5%);
}
input[type=text] {
border: 2px solid #bdbdbd;
font-family: 'Roboto', Arial, Sans-serif;
font-size: 15px;
font-weight: 400;
padding: .5em .75em;
width: 300px;
}
input[type=text]:focus {
border: 2px solid #757575;
outline: none;
}
.autocomplete-suggestions {
border: 1px solid #999;
background: #FFF;
overflow: auto;
}
.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.autocomplete-selected {
background: #F0F0F0;
}
.autocomplete-suggestions strong {
font-weight: normal;
color: #3399FF;
}
.autocomplete-group {
padding: 2px 5px;
}
.autocomplete-group strong {
display: block;
border-bottom: 1px solid #000;
}
</style>Langkah 3: Panggil library jQuery
Tambahkan kode berikut tepat di atas tag </body>:
<script src="jquery.min.js"></script>
<script src="jquery.autocomplete.min.js"></script>Langkah 4: Inisialisasi autocomplete
Tambahkan kode JavaScript berikut tepat di bawah pemanggilan library, masih di atas tag </body>:
<script type="text/javascript">
$(document).ready(function() {
// Data yang ditampilkan pada autocomplete.
var buah = [
{ value: 'Anggur', data: 'Anggur' },
{ value: 'Apple', data: 'Apple' },
{ value: 'Alpukat', data: 'Alpukat' },
{ value: 'Durian', data: 'Durian' },
{ value: 'Jeruk', data: 'Jeruk' },
{ value: 'Klengkeng', data: 'Klengkeng' },
{ value: 'Mangga', data: 'Mangga' },
{ value: 'Manggis', data: 'Manggis' },
{ value: 'Melon', data: 'Melon' },
{ value: 'Nanas', data: 'Nanas' },
{ value: 'Nangka', data: 'Nangka' },
{ value: 'Peer', data: 'Peer' },
{ value: 'Pepaya', data: 'Pepaya' },
{ value: 'Pisang', data: 'Pisang' },
{ value: 'Rambutan', data: 'Rambutan' },
{ value: 'Salak', data: 'Salak' },
{ value: 'Sawo', data: 'Sawo' },
{ value: 'Semangka', data: 'Semangka' }
];
// Terapkan autocomplete pada input #buah.
$( "#buah" ).autocomplete({
lookup: buah
});
})
</script>Langkah 5: Kode lengkap
Berikut kode lengkap autocomplete-statis.html setelah semua langkah digabung:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
<title>Autocomplete Input Tanpa Database</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body {
font-family: 'Roboto', Arial, Sans-serif;
font-size: 15px;
font-weight: 400;
}
.container {
left: 50%;
position: absolute;
top: 7.5%;
transform: translate(-50%, -7.5%);
}
input[type=text] {
border: 2px solid #bdbdbd;
font-family: 'Roboto', Arial, Sans-serif;
font-size: 15px;
font-weight: 400;
padding: .5em .75em;
width: 300px;
}
input[type=text]:focus {
border: 2px solid #757575;
outline: none;
}
.autocomplete-suggestions {
border: 1px solid #999;
background: #FFF;
overflow: auto;
}
.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.autocomplete-selected {
background: #F0F0F0;
}
.autocomplete-suggestions strong {
font-weight: normal;
color: #3399FF;
}
.autocomplete-group {
padding: 2px 5px;
}
.autocomplete-group strong {
display: block;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<h3>Autocomplete Input Tanpa Database</h3>
<form action="" method="post">
<input type="text" id="buah" name="buah" placeholder="Nama Buah">
</form>
</div>
<script src="jquery.min.js"></script>
<script src="jquery.autocomplete.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var buah = [
{ value: 'Anggur', data: 'Anggur' },
{ value: 'Apple', data: 'Apple' },
{ value: 'Alpukat', data: 'Alpukat' },
{ value: 'Durian', data: 'Durian' },
{ value: 'Jeruk', data: 'Jeruk' },
{ value: 'Klengkeng', data: 'Klengkeng' },
{ value: 'Mangga', data: 'Mangga' },
{ value: 'Manggis', data: 'Manggis' },
{ value: 'Melon', data: 'Melon' },
{ value: 'Nanas', data: 'Nanas' },
{ value: 'Nangka', data: 'Nangka' },
{ value: 'Peer', data: 'Peer' },
{ value: 'Pepaya', data: 'Pepaya' },
{ value: 'Pisang', data: 'Pisang' },
{ value: 'Rambutan', data: 'Rambutan' },
{ value: 'Salak', data: 'Salak' },
{ value: 'Sawo', data: 'Sawo' },
{ value: 'Semangka', data: 'Semangka' }
];
$( "#buah" ).autocomplete({
lookup: buah
});
})
</script>
</body>
</html>Buka browser dan akses http://localhost/latihan/autocomplete-statis.html untuk melihat hasilnya.
Autocomplete dengan PHP MySQLi (data dinamis)
Pada pendekatan ini, data sugesti diambil langsung dari database secara real-time — cocok untuk data yang terus bertambah atau berubah.
Siapkan database
Buat database baru bernama autocomplete di phpMyAdmin, lalu buat tabel table_buah dengan struktur berikut:
| Field | Tipe data | Panjang | Ekstra |
|---|---|---|---|
| id | int | 5 | auto increment |
| buah | varchar | 30 |
Pilih database autocomplete, lalu buka tab SQL di phpMyAdmin dan jalankan query insert berikut:
INSERT INTO `table_buah` (`id`, `buah`) VALUES
(NULL, 'Apple'), (NULL, 'Anggur'), (NULL, 'Pisang'),
(NULL, 'Melon'), (NULL, 'Peer'), (NULL, 'Jeruk'),
(NULL, 'Semangka'), (NULL, 'Nanas'), (NULL, 'Manggis'),
(NULL, 'Durian'), (NULL, 'Pepaya'), (NULL, 'Sawo'),
(NULL, 'Rambutan'), (NULL, 'Alpukat');Buat file HTML
Copy file autocomplete-statis.html dan rename menjadi autocomplete-dinamis.html. Ganti blok JavaScript inisialisasi autocomplete (Langkah 4) dengan kode berikut:
<script type="text/javascript">
$(document).ready(function() {
$( "#buah" ).autocomplete({
serviceUrl: "source.php", // File PHP pemroses data
dataType: "JSON", // Format response
onSelect: function (suggestion) {
$( "#buah" ).val("" + suggestion.buah);
}
});
})
</script>Perbedaan utama dari versi statis: parameter lookup (array data lokal) diganti dengan serviceUrl yang menunjuk ke file PHP — sehingga setiap kali user mengetik, request dikirim ke server dan data sugesti diambil dari database.
Buat file source.php
Buat file baru bernama source.php di folder latihan, lalu isi dengan kode berikut:
<?php
// Set header response JSON.
header("Content-Type: application/json; charset=UTF-8");
// Konfigurasi koneksi database.
$host = "localhost";
$username = "root";
$password = ""; // Sesuaikan dengan password database kamu
$database = "autocomplete";
// Koneksi ke database.
$conn = new mysqli($host, $username, $password, $database);
// Ambil keyword dari request.
$buah = $conn->real_escape_string($_GET["query"]);
// Query ke database.
$query = $conn->query("SELECT * FROM table_buah WHERE buah LIKE '%$buah%' ORDER BY buah ASC");
$result = $query->fetch_all(MYSQLI_ASSOC);
// Format data untuk autocomplete.
$output = [];
foreach ($result as $data) {
$output['suggestions'][] = [
'value' => $data['buah'],
'buah' => $data['buah']
];
}
if (! empty($output)) {
echo json_encode($output);
}Buka browser dan akses http://localhost/latihan/autocomplete-dinamis.html untuk mencobanya. Ketikkan nama buah — data sugesti akan muncul dari database secara real-time.
Download contoh lengkap kedua versi autocomplete (statis dan dinamis) yang sudah siap pakai:
