Hai ketemu lagi dengan saya dewan komputer dan pada postingan kali ini agak mirip dengan postingan sebelumnya hanya saja pada postingan kali ini akan saya contohkan bagaimana jika mengambil datanya dari file json. Ini juga merupakan terusan dari postingan saya yang dibawah
Menampilkan Data Format JSON dan TXT ke dalam Datatables dengan Ajax
Jika pada postingan tersebut saya contohkan datanya ditampilkan ke dalam tabel dan menggunakan plugin datatables. Pada contoh kali ini saya akan menampilkan data yang ada dalam file dengan format .json ke live search autocomplete atau auto suggestion. Jadi jika user mengetikkan sesuatu maka akan muncul suggestion dari kata yang paling mirip seperti yang diketikkan oleh user. Seperti saat sobat ingin mencari sesuatu di google, saat mengetikkan suatu kata maka akan muncul kata yang mirip dengan yang sobat inginkan.
Jika pada postingan sebelumnya kita menggunakan koneksi ke database maka akan sangat mudah karena kita hanya perlu menggunakan query LIKE. Namun bagaimana jika data yang ingin kita tampilkan dari file .json? Itu yang akan kita buat sekarang. Jadi mungkin sedikit demi sedikit akan saya bahas tentang apa saja sih fitur yang bisa kita gunakan tanpa kita koneksi ke database, jadi hanya mengandalkan file .json saja. Itu ada banyak sekali dan hampir semua tentu bisa seperti menampilkan ke dalam tabel, menampilkan isi dari artikel dari file json, menampilkan chart dan masih banyak lagi.
Baca juga :
Membuat Autocomplete/Live Search dengan Foto dengan Ajax & PHP
Cara Membuat Autocomplete/Suggestion dengan Plugin pada PHP
Cara Membuat Autocomplete dengan Ajax dari Database pada PHP
Membuat Autocomplete / Live Search dari File .json dengan JQuery (Disertai dengan gambar/foto)
Kita tidak perlu koneksi dari database ya jadi kita hanya perlu bikin front-end saja. Untuk mempercantik tampilannya saya menggunakan bootstrap 4. Tidak usah berlama-lama, saya akan memberikan contohnya, yaitu sebagai berikut
1. Pertama buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-autocomplete-json/
. Lalu di dalamnya buat folder lagi dengan nama avatar kemudian isi dengan foto seperti gambar dibawah
Setelah itu sobat siapkan file dengan format file .json yang isinya tentu data dengan format json. File ini seharusnya bukan dibuat manual ya.. melainkan sistem yang membuat mungkin dengan cronjob atau sebagainya. Untuk contoh sobat bisa copy ini dan pastekan di notepad atau lainnya dengan format file .json dan beri nama data.json.
[
{
"id":5,
"nama_mahasiswa":"Andre",
"alamat":"Purwokerto",
"avatar":"avatar4.png"
},
{
"id":51,
"nama_mahasiswa":"Ayu Dewi",
"alamat":"Jakarta",
"avatar":"avatar1.png"
},
{
"id":66,
"nama_mahasiswa":"Dedy Corbuzier",
"alamat":"Jakarta",
"avatar":"avatar3.png"
},
{
"id":44,
"nama_mahasiswa":"Dery",
"alamat":"Cilacap",
"avatar":"avatar4.png"
},
{
"id":1,
"nama_mahasiswa":"Dewan Komputer",
"alamat":"Cilacap",
"avatar":"avatar2.png"
},
{
"id":56,
"nama_mahasiswa":"Dian Satro",
"alamat":"Jakarta",
"avatar":"avatar1.png"
},
{
"id":52,
"nama_mahasiswa":"Gading Martin",
"alamat":"Yogyakarta",
"avatar":"avatar4.png"
},
{
"id":18,
"nama_mahasiswa":"Gundul",
"alamat":"Purwokerto",
"avatar":"avatar2.png"
},
{
"id":59,
"nama_mahasiswa":"Melinda",
"alamat":"Yogyakarta",
"avatar":"avatar1.png"
},
{
"id":45,
"nama_mahasiswa":"Rafii Ahmad",
"alamat":"Jakarta",
"avatar":"avatar2.png"
}
]
2. Untuk mempercantik tambahkan librari bootstrap. Kode dibawah letakkan pada tag <head> dan saya mencontohkan degan librari cs dan js online. Jika sobat ingin menggunakan untuk keperluan development tentu sobat harus mendownloadnya terlebih dahulu siwebsite resminya atau pada project ini di akhir postingan. Kodenya adalah sebagai berikut
<!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
kode diatas baru kode css-nya saja, agar lebih rapi saya anjurkan agar dipisah untuk css & js-nya. Selanjutnya tambahkan kode dibawah ini di dalam tag <body> paling bawah yang berarti di atas </body>
<!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Kita hanya perlu jquery saja, dan plugin ini adalah plugin yang wajib ada di setiap aplikasi saya karena banyak fitur yang sangat berguna salah satunya yaitu seperti pada artikel ini.
3. Kemudian pada file index.php tag <body> kita tambahkan kode dibawah untuk menempatkan field pencarian dan hasil pencariannya
<div class="container">
<h2 align="center" class="mb-4 mt-4">Autocomplete / Live Data Search dari Json File dengan Jquery</h2>
<div align="center">
<input type="text" id="nama_mahasiswa" placeholder="Cari Mahasiswa..." class="form-control" />
</div>
<ul class="list-group" id="resultlist"></ul>
</div>
Untuk penjelasannya sama seperti postingan sebelumnya dan harusnya cukup mudah untuk dibaca.
4. Kemudian masih di index.php taruh script dibawah paling akhir dari tag <body> atau tepat diatas tag penutup </body>
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
$('#nama_mahasiswa').keyup(function(){
$('#resultlist').html('');
$('#state').val('');
var searchField = $('#nama_mahasiswa').val();
var expression = new RegExp(searchField, "i");
$.getJSON('data.json', function(data) {
$.each(data, function(key, value){
if (value.nama_mahasiswa.search(expression) != -1 || value.alamat.search(expression) != -1){
$('#resultlist').append(`
<li class="list-group-item link-class">
<img src="avatar/`+value.avatar+`" height="40" width="40" class="img-thumbnail" />
<span class="nama">`+value.nama_mahasiswa+`</span>
<span class="text-muted" style="float: right;">`+value.alamat+`</span>
</li>`);
}
});
});
});
$('#resultlist').on('click', 'li', function() {
let nama_mahasiswa = $(this).children('.nama').text();
$('#nama_mahasiswa').val(nama_mahasiswa);
$("#resultlist").html('');
});
});
</script>
Penjelasan :
– Untuk pencarian kita menggunakan Regex Expression pada baris dibawah
var expression = new RegExp(searchField, "i");
Kemudian untuk mencari per nama kolomnya bisa dilihat pada baris
if (value.nama_mahasiswa.search(expression) != -1 || value.alamat.search(expression) != -1){ }
Jika sobat ingin menambahkan kolom apa saja yang ingin dicari maka tambahkan OR atau ‘||’. Sesuaikan juga path dari gambar sobat. Jika tidak menggunakan gambar tentunya hanya tinggal hapus saja. baris <img…>
5. Selanjutnya jalankan project sobat maka hasilnya akan seperti gambar dibawah
Hasilnya sama saja bukan seperti sebelumnya saat koneksi dengan database? Untuk pengguna biasa tentu tidak akan sadar bahwa mereka langsung mengarah ke database atau tidak. Jika sobat tidak memerlukan gambar tentu bisa tinggal hapus saja pada tag <img>. Sekian postingan saya ini semoga bermanfaat dan tunggu postingan saya yang lain yang membahas tentang mengambil data dari file .json.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :