Hai, balik lagi ditutorial pemrograman Dumet School, pada kesempatan kali ini saya akan berbagi pengetahuan tentang Bagaimana Cara Membuat Autocomplete Menggunakan Ajax Dan PHP, pernah gak teman teman melihat dan merasakan sebuah website yang terdapat inputan ketika kita baru saja mengetikan 1 huruf awal maka akan di arahakn ke kata kata lain yang menyangkut kalimata berdasarkan text yang kita inputkan pertama kali,
seperti kita mengetikan huruf ‘M’ maka akan di arahkan kata yang terdapat huruf ‘M’ seperti ‘Masakan Minuman dll’ tergantung dari kebutuhan pada text tersebut yah tidak sembarang, oke kira kira kasus yang harus kita selesaikan ialah seperti itu, oke cukup menarik bukan?, sekarang hal yang harus kita persiapakan ialah, teman teman buatkan 2 file baru dan beri nama show.php dan proses.php “penamaan bisa bebas terserah teman temanâ€, oke jika sudah siapkan sebuah database yang dibutuhkan, jika sudah coba tambahkan pada file show.php script dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="js/jquery-ui.css"> <!-- untuk link ini bisa download di https://jqueryui.com/ --> </head> <body> <form method="POST" action=""> <table> <tr> <th>ID</th> <th>NAMA</th> </tr> <tr> <td>NAMA</td> <td><input type="text" id="id" name="id" placeholder="ID" required><span id="nama-produk">-</span></td> </tr> <tr> <td><input type="submit" name="submit" value="Cetak"></td> <td><input type="reset" name="reset" value="Cancel"></td> </tr> </table> </form> <script src="js/jquery.js"></script> <!-- untuk link ini bisa download di https://jqueryui.com/ --> <script src="js/jquery-ui.js"></script> <!-- untuk link ini bisa download di https://jqueryui.com/ --> <script type="text/javascript"> $(document).ready(function(){ $("#id").autocomplete({ minLength:1, source:'get_pro.php', select:function(event, ui){ $('#nama-produk').html(ui.item.name); } }); }); </script> </body> </html> |
Dan file proses.php tambahkan seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php $con = mysqli_connect('localhost','dumet','school','webmaster'); $gt = $_GET['term']; $sql = mysqli_query($con, "SELECT * FROM ismet_product WHERE name LIKE '%".$gt."%'"); $json = array(); while ($pro = mysqli_fetch_array($sql)) { $json[] = array( 'label' => $pro['name'], 'value' => $pro['name'] . '-' . $pro['id'], 'nama' => $pro['name'] ); } header("Content-Type: text/json"); echo json_encode($json); ?> |
Jika sudah disave coba masukkan satu kata yang berhubungan dengan topik pada isi table teman teman berhubung saya memasukan nama product maka akan tampil nama product yang sesuai dengan nama awalan huruf yang dimasukkan, oke cukup mudah bukan, jika berhasil maka hasil nya seperti berikut :
Oke cukup udah bukan sekian tutorial tentang Bagaimana Cara Membuat Autocomplete Menggunakan Ajax Dan PHP. Sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA