Cara Membuat Autocomplete dengan Plugin pada PHP – Setelah sebelumnya saya membahas tentang Cara Membuat Autocomplete dengan Ajax dari Database pada PHP, kali ini saya akan membahas tentang membuatnya menggunakan Plugin. plugin yang saya gunakan adalah jqury.autocomplete.min.js yang bisa sobat download disini. Sebenarnya banyak plugin yang bisa digunakan tapi menurut saya ini yang paling bagus.
Autocomplete sendiri adalah suatu suggesti atau saran yang dengan data yang mirip dengan apa yang diketikkan oleh pengguna. Seperti google pada saat ingin search maka akan muncul suggesti yang ingin dicari. Dengan autosuggestin ini tentunya kita menggunakan input text bukanlah select option/combobox. Langsung saja saya berikan contohnya namun sebelum itu kita akan membuat databasenya terlebih dahulu karena kita akan mengambil datanya dari database jadi isinya bisa dinamis.
Membuat Database MySQL
1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.
2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go
CREATE TABLE `provinsi` ( `id_prov` char(2) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `nama` tinytext CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, PRIMARY KEY (`id_prov`) USING BTREE )
3. Kemudian daripada sobat memasukkan datanya satu-persatu maka sobat bisa jalankan perintah query dibawah
INSERT INTO `provinsi` VALUES ('11', 'Aceh');
INSERT INTO `provinsi` VALUES ('12', 'Sumatera Utara');
INSERT INTO `provinsi` VALUES ('13', 'Sumatera Barat');
INSERT INTO `provinsi` VALUES ('14', 'Riau');
INSERT INTO `provinsi` VALUES ('15', 'Jambi');
INSERT INTO `provinsi` VALUES ('16', 'Sumatera Selatan');
INSERT INTO `provinsi` VALUES ('17', 'Bengkulu');
INSERT INTO `provinsi` VALUES ('18', 'Lampung');
INSERT INTO `provinsi` VALUES ('19', 'Kepulauan Bangka Belitung');
INSERT INTO `provinsi` VALUES ('21', 'Kepulauan Riau');
INSERT INTO `provinsi` VALUES ('31', 'DKI Jakarta');
INSERT INTO `provinsi` VALUES ('32', 'Jawa Barat');
INSERT INTO `provinsi` VALUES ('33', 'Jawa Tengah');
INSERT INTO `provinsi` VALUES ('34', 'DI Yogyakarta');
INSERT INTO `provinsi` VALUES ('35', 'Jawa Timur');
INSERT INTO `provinsi` VALUES ('36', 'Banten');
INSERT INTO `provinsi` VALUES ('51', 'Bali');
INSERT INTO `provinsi` VALUES ('52', 'Nusa Tenggara Barat');
INSERT INTO `provinsi` VALUES ('53', 'Nusa Tenggara Timur');
INSERT INTO `provinsi` VALUES ('61', 'Kalimantan Barat');
INSERT INTO `provinsi` VALUES ('62', 'Kalimantan Tengah');
INSERT INTO `provinsi` VALUES ('63', 'Kalimantan Selatan');
INSERT INTO `provinsi` VALUES ('64', 'Kalimantan Timur');
INSERT INTO `provinsi` VALUES ('65', 'Kalimantan Utara');
INSERT INTO `provinsi` VALUES ('71', 'Sulawesi Utara');
INSERT INTO `provinsi` VALUES ('72', 'Sulawesi Tengah');
INSERT INTO `provinsi` VALUES ('73', 'Sulawesi Selatan');
INSERT INTO `provinsi` VALUES ('74', 'Sulawesi Tenggara');
INSERT INTO `provinsi` VALUES ('75', 'Gorontalo');
INSERT INTO `provinsi` VALUES ('76', 'Sulawesi Barat');
INSERT INTO `provinsi` VALUES ('81', 'Maluku');
INSERT INTO `provinsi` VALUES ('82', 'Maluku Utara');
INSERT INTO `provinsi` VALUES ('91', 'Papua Barat');
INSERT INTO `provinsi` VALUES ('92', 'Papua');
Cara Membuat Autocomplete
Berikut adalah cara membuat autocomplete/autosuggest menggunakan plugin :
1. Buat file koneksi.php yang berfungsi untuk menyambungkan aplikasi dengan database sehingga kita bisa memakainya berkali-kali. Isikan dengan kode dibawah
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>
Sesuaikan dengan database yang sobat gunakan.
2. Pertama buat file index.php dan pada tag <head> kita tambahkan dengan kode dibawah untuk memasukkan librari css dan jsnya
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.7/jquery.autocomplete.min.js"></script>
Karena untuk keperluan demo jadi saya menggunakan css dan js online, namun jika sobat ingin menggunakannya untuk keperluan development maka sobat harus mendownloadnya terlebih dahulu karena nanti tidak akan jalan jika dalam keadaan offline atau sobat bisa mendownloadnya bersama dengan project ini di akhir postingan.
3. Untuk mempercantik tempat untuk sugestinya maka kita buat cssnya yang bisa diletakkan antara tag<head> seperti dibawah
<style>
.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>
4. Kemudian masih di file index.php, pada tag <body> kita buat input textnya dengan menambahkan kode dibawah
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand text-white" href="index.php">
Dewan Komputer
</a>
</nav>
<div class="container">
<h3 align="center" class="mt-3 mb-5">Cara Membuat Autocomplete dengan Plugin pada PHP</h3>
<div class="row">
<div class="col-sm-6 offset-sm-3">
<label>Nama Provinsi</label>
<input type="text" name="provinsi" id="provinsi" class="form-control" placeholder="Tulis Nama Provinsi Indonesia" />
</div>
</div>
</div>
<div class="fixed-bottom text-center mt-5">© <?php echo date('Y'); ?> Copyright:
<a href="https://dewankomputer.com/"> Dewan Komputer</a>
</div>
5. Kemudian masih di index.php pada tag <body> paling bawah kita tambahkan kode javascriptnya seperti script dibawah
<script type="text/javascript">
$(document).ready(function() {
$( "#provinsi" ).autocomplete({
serviceUrl: "search.php", // Kode php untuk prosesing data
dataType: "JSON", // Tipe data JSON
onSelect: function (suggestion) {
$( "#provinsi" ).val(suggestion.nama);
}
});
})
</script>
Penjelasan :
Pada #provinsi menandakan kita akan menampilkan sugesti pada elemen yang mempunyai id=’provinsi’. Pada serviceUrl: “search.php” berarti service yang mengambil datanya berada di file search.php.
6. Buat file search.php yang berfungsi untuk mengambil datanya dari database sehingga autocomplete bisa dinamis. Isikan search.php dengan kode dibawah
<?php
header("Content-Type: application/json; charset=UTF-8");
include 'koneksi.php';
if(isset($_GET["query"])){
$key = "%".$_GET["query"]."%";
$query = "SELECT * FROM provinsi WHERE nama LIKE ? LIMIT 10";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param('s', $key);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
$output['suggestions'][] = [
'value' => $row['nama'],
'nama' => $row['nama']
];
}
if (! empty($output)) {
echo json_encode($output);
}
}
?>
6. Jalankan project sobat maka hasilnya akan seperti dibawah
Secara otomatis nanti huruf yang sama dengan yang diketikkan oleh pengguna akan mempunyai warna yang berbeda. Untuk mengubahnya sobat bisa ubah pada cssnya bagian .autocomplete-suggestions strong {}. Untuk mau menggunakan cara ini atau cara sebelumnya yaitu menggunakan Ajax, sobat bisa pilih sendiri dan bisa bandingkan dengan tutorial sebelumnya dan dengan cara sebelumnya juga tentu sobat juga bisa mengcustomnya sendiri.
Sekian postingan saya tentang Cara Membuat Autocomplete dengan Plugin pada PHP. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah dan jika ada kesalahan saya mohon maaf.
Baca juga :
Cara Membuat Autocomplete dengan Ajax dari Database pada PHP
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
mantap gan. terima kasih.
sebelumnya terima kasih sudah membagikan pengetahuan… sangat bermanfaat untuk project saya yg sedang dikerjakan. Ijin bertanya, jika ingin menambahkan statement “OR” di query SQL nya , caranya bagaimana kah? misal kita mau cari mahasiswa berdasar nama atau no hp nya.
saya coba seperti ini :
SELECT * FROM mahasiswa WHERE nama LIKE ? OR nohp LIKE ? LIMIT 10″
Namun tidak bisa , apakah ada kesalahan atau ada cara lain? terima kasih.
querynya sudah bener tinggal parameternya yg ‘?’ itu pos ngirim jg harus ditambah “%param%”
bagaimana cara test file search.php … apakah ada error atau tidak…
karena.. saya coba di local server mau jalan.. tapi setelah sy upload ke server hostingan.. ga mau jalan….
mohon pencerahan
terima kasih
coba di console pada onSelect()
contoh:
onSelect: function (suggestion) {
console.log(suggestion)
$( “#provinsi” ).val(suggestion.nama);
}
terus lihat lewat inspect element > pilih console
saya mau nampilkan id dan nama, apanya yg perlu ditambahkan?