Membuat Autocomplete/Live Search dengan Foto dengan Ajax & PHP

Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang cara Membuat Autocomplete/Live Search dengan Gambar atau Foto pada PHP. Seperti yang sobat tahu, sebelumnya saya telah membuat postingan tentang autocomplete atau auto suggestion dengan plugin maupun tanpa plugin dan bisa sobat lihat pada postingan dibawah :

Cara Membuat Autocomplete/Suggestion dengan Plugin pada PHP

Cara Membuat Autocomplete dengan Ajax dari Database pada PHP

Pada contoh kali ini saya juga akan membuat auto suggestion dengan Ajax dan menampilkan hasilnya berupa text dan gambar. Sebenarnya dari cara sebelumnya pun bisa sobat ubah-ubah dan tambah gambar. Tapi kali ini akan saya kasih contoh lagi langsung dengan fotonya. Banyak jalan menuju roma dan banyak cara untuk membuat seperti yang sobat mau jadi setiap programmer belum tentu memiliki cara yang sama. Namun cara yang akan saya contohkan kali ini menurut saya caranya cukup mudah. langsung saja sobat tinggal ikuti step-step dibawah :

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 mengetes nantinya apakah benar-benar terkoneksi atau belum dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_mahasiswa`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_mahasiswa` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `jenis_kelamin` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `tgl_masuk` date NOT NULL,
  `jurusan` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `biodata` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `avatar` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
)

CREATE TABLE `tbl_mahasiswa` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`nama_mahasiswa` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`jenis_kelamin` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`tgl_masuk` date NOT NULL,

`jurusan` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`biodata` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`avatar` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

PRIMARY KEY (`id`) USING BTREE

)

3. Isikan data pada tbl_mahasiswa_search dengan mengetikkan query dibawah ini

INSERT INTO `tbl_mahasiswa` VALUES (1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'avatar2.png');
INSERT INTO `tbl_mahasiswa` VALUES (2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', 'biodata', 'avatar3.png');
INSERT INTO `tbl_mahasiswa` VALUES (3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (4, 'Siti', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi', 'biodata', 'avatar4.png');
INSERT INTO `tbl_mahasiswa` VALUES (6, 'Nunung', 'Cilacap', 'Perempuan', '2019-03-20', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (7, 'Aziz', 'Cilacap', 'Laki-laki', '2019-03-14', 'Sistem Informasi', 'biodata', 'avatar2.png');
INSERT INTO `tbl_mahasiswa` VALUES (8, 'Lucinta Luma', 'Jakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar3.png');
INSERT INTO `tbl_mahasiswa` VALUES (9, 'Luna Maya', 'Yogyakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (10, 'Syahrini', 'Semarang', 'Perempuan', '2019-03-22', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (11, 'Tegar', 'Purwokerto', 'Laki-laki', '2019-03-07', 'Sistem Informasi', 'biodata', 'avatar4.png');
INSERT INTO `tbl_mahasiswa` VALUES (12, 'Tukul', 'Cilacap', 'Laki-laki', '2019-03-05', 'Sistem Informasi', 'biodata', 'avatar2.png');
INSERT INTO `tbl_mahasiswa` VALUES (13, 'Nanang', 'Jakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar3.png');
INSERT INTO `tbl_mahasiswa` VALUES (14, 'Bambang', 'Yogyakarta', 'Laki-laki', '2019-03-19', 'Teknik Informatika', 'biodata', 'avatar4.png');
INSERT INTO `tbl_mahasiswa` VALUES (15, 'Arwana', 'Semarang', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'avatar2.png');
INSERT INTO `tbl_mahasiswa` VALUES (16, 'Alan', 'Yogyakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar3.png');
INSERT INTO `tbl_mahasiswa` VALUES (17, 'John', 'Semarang', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar4.png');
INSERT INTO `tbl_mahasiswa` VALUES (18, 'Gundul', 'Purwokerto', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'avatar2.png');
INSERT INTO `tbl_mahasiswa` VALUES (19, 'Nella Kharisma', 'Cilacap', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (20, 'Via Vallen', 'Jakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (21, 'Baim', 'Yogyakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar3.png');
INSERT INTO `tbl_mahasiswa` VALUES (22, 'Lulu', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (44, 'Dery', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'avatar4.png');
INSERT INTO `tbl_mahasiswa` VALUES (45, 'Rafii Ahmad', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', 'biodata', 'avatar2.png');
INSERT INTO `tbl_mahasiswa` VALUES (46, 'Ariel Noah', 'Yogyakarta', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'avatar3.png');
INSERT INTO `tbl_mahasiswa` VALUES (47, 'Ariel Tatum', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (48, 'Gisella', 'Purwokerto', 'Perempuan', '2019-01-22', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (49, 'Vanessa Angel', 'Cilacap', 'Perempuan', '2019-03-20', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (50, 'Nikita Mirzani', 'Cilacap', 'Perempuan', '2019-03-14', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (51, 'Ayu Dewi', 'Jakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (52, 'Gading Martin', 'Yogyakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar4.png');
INSERT INTO `tbl_mahasiswa` VALUES (53, 'Maya', 'Semarang', 'Perempuan', '2019-03-22', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (54, 'Agnes', 'Purwokerto', 'Perempuan', '2019-03-07', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (55, 'Amel Alvi', 'Cilacap', 'Perempuan', '2019-03-05', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (56, 'Dian Satro', 'Jakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (57, 'Cinta', 'Yogyakarta', 'Perempuan', '2019-03-19', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (58, 'Rangga', 'Semarang', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'avatar2.png');
INSERT INTO `tbl_mahasiswa` VALUES (59, 'Melinda', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (60, 'Meriam Belina', 'Semarang', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (61, 'Cinta Laura', 'Purwokerto', 'Perempuan', '2019-03-12', 'Sistem Informasi', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (62, 'Bunga', 'Cilacap', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (63, 'Citra', 'Jakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (64, 'Lestari', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (65, 'Titi Kamal', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');
INSERT INTO `tbl_mahasiswa` VALUES (66, 'Dedy Corbuzier', 'Jakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar3.png');

INSERT INTO `tbl_mahasiswa` VALUES (1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'avatar2.png');

INSERT INTO `tbl_mahasiswa` VALUES (2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', 'biodata', 'avatar3.png');

INSERT INTO `tbl_mahasiswa` VALUES (3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (4, 'Siti', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi', 'biodata', 'avatar4.png');

INSERT INTO `tbl_mahasiswa` VALUES (6, 'Nunung', 'Cilacap', 'Perempuan', '2019-03-20', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (7, 'Aziz', 'Cilacap', 'Laki-laki', '2019-03-14', 'Sistem Informasi', 'biodata', 'avatar2.png');

INSERT INTO `tbl_mahasiswa` VALUES (8, 'Lucinta Luma', 'Jakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar3.png');

INSERT INTO `tbl_mahasiswa` VALUES (9, 'Luna Maya', 'Yogyakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (10, 'Syahrini', 'Semarang', 'Perempuan', '2019-03-22', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (11, 'Tegar', 'Purwokerto', 'Laki-laki', '2019-03-07', 'Sistem Informasi', 'biodata', 'avatar4.png');

INSERT INTO `tbl_mahasiswa` VALUES (12, 'Tukul', 'Cilacap', 'Laki-laki', '2019-03-05', 'Sistem Informasi', 'biodata', 'avatar2.png');

INSERT INTO `tbl_mahasiswa` VALUES (13, 'Nanang', 'Jakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar3.png');

INSERT INTO `tbl_mahasiswa` VALUES (14, 'Bambang', 'Yogyakarta', 'Laki-laki', '2019-03-19', 'Teknik Informatika', 'biodata', 'avatar4.png');

INSERT INTO `tbl_mahasiswa` VALUES (15, 'Arwana', 'Semarang', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'avatar2.png');

INSERT INTO `tbl_mahasiswa` VALUES (16, 'Alan', 'Yogyakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar3.png');

INSERT INTO `tbl_mahasiswa` VALUES (17, 'John', 'Semarang', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar4.png');

INSERT INTO `tbl_mahasiswa` VALUES (18, 'Gundul', 'Purwokerto', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'avatar2.png');

INSERT INTO `tbl_mahasiswa` VALUES (19, 'Nella Kharisma', 'Cilacap', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (20, 'Via Vallen', 'Jakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (21, 'Baim', 'Yogyakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar3.png');

INSERT INTO `tbl_mahasiswa` VALUES (22, 'Lulu', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (44, 'Dery', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'avatar4.png');

INSERT INTO `tbl_mahasiswa` VALUES (45, 'Rafii Ahmad', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', 'biodata', 'avatar2.png');

INSERT INTO `tbl_mahasiswa` VALUES (46, 'Ariel Noah', 'Yogyakarta', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'avatar3.png');

INSERT INTO `tbl_mahasiswa` VALUES (47, 'Ariel Tatum', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (48, 'Gisella', 'Purwokerto', 'Perempuan', '2019-01-22', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (49, 'Vanessa Angel', 'Cilacap', 'Perempuan', '2019-03-20', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (50, 'Nikita Mirzani', 'Cilacap', 'Perempuan', '2019-03-14', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (51, 'Ayu Dewi', 'Jakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (52, 'Gading Martin', 'Yogyakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar4.png');

INSERT INTO `tbl_mahasiswa` VALUES (53, 'Maya', 'Semarang', 'Perempuan', '2019-03-22', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (54, 'Agnes', 'Purwokerto', 'Perempuan', '2019-03-07', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (55, 'Amel Alvi', 'Cilacap', 'Perempuan', '2019-03-05', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (56, 'Dian Satro', 'Jakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (57, 'Cinta', 'Yogyakarta', 'Perempuan', '2019-03-19', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (58, 'Rangga', 'Semarang', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'avatar2.png');

INSERT INTO `tbl_mahasiswa` VALUES (59, 'Melinda', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (60, 'Meriam Belina', 'Semarang', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (61, 'Cinta Laura', 'Purwokerto', 'Perempuan', '2019-03-12', 'Sistem Informasi', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (62, 'Bunga', 'Cilacap', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (63, 'Citra', 'Jakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (64, 'Lestari', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (65, 'Titi Kamal', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar1.png');

INSERT INTO `tbl_mahasiswa` VALUES (66, 'Dedy Corbuzier', 'Jakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'avatar3.png');

Auto Complete dengan Gambar/Foto

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-image. Lalu di dalamnya buat folder lagi dengan nama avatar kemudian isi dengan foto seperti gambar dibawah

2. Buatlah file koneksi.php pada folder project sobat dan isikan dengan script dibawah. Saya segaja tidak membuat file koneksi pada satu file dengan menu search seperti kebanyakan tutorial karena dalam penerapannya itu tidaklah mungkin jika kita membuat file koneksinya pada setiap halaman karena akan sangat susah nanti jika akan mengimplementasikan atau memindahkan server kita harus ganti satu per satu. Oleh karena itu kita harus membuatnya pada satu file saja dan jika ingin pindah server kita akan menggantinya di file ini saja.

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1 = new mysqli(HOST, USER, PASS, DB1);

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host Menggunakan PHP – Part 3

3. Untuk mempercantik tambahkan librari css bootstrap dan saya juga menambahkan beberapa css. 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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
  #resultlist {
    position: absolute;
    width: 81%;
    max-width:89%;
    cursor: pointer;
    overflow-y: auto;
    max-height: 400px;
    box-sizing: border-box;
    z-index: 1001;
  }
  .link-class:hover{
    background-color:#f1f1f1;
    cursor: pointer;
  }
</style>

<style>

#resultlist {

position: absolute;

width: 81%;

max-width:89%;

cursor: pointer;

overflow-y: auto;

max-height: 400px;

box-sizing: border-box;

z-index: 1001;

}

.link-class:hover{

background-color:#f1f1f1;

cursor: pointer;

}

</style>

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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Untuk menjalankan Ajax tentu kita perlu jquery selain untuk Ajax jquery ini juga banuyak fiturnya namun akan saya jelaskan pada postingan-postingan saya selanjutnya.

4. Selanjutnya sobat buat tampilan dari form yang ingin dibuat. Untuk contoh saya berikan 1 field saja. Masukkan kode berikut di dalam tag <body>

<div class="container">
  <h2 align="center" class="mb-4 mt-4">Autocomplete Dengan Gambar dan Ajax</h2>
  <div align="center">
    <input type="text" id="nama_mahasiswa" placeholder="Cari Nama Mahasiswa..." class="form-control" />
  </div>
  <ul class="list-group" id="resultlist"></ul>
</div>

<h2 align="center" class="mb-4 mt-4">Autocomplete Dengan Gambar dan Ajax</h2>

</div>

</div>

Penjelasan :

pada kode dibawah

<input type="text" id="nama_mahasiswa" placeholder="Cari Nama Mahasiswa..." class="form-control" />

1	<input type="text" id="nama_mahasiswa" placeholder="Cari Nama Mahasiswa..." class="form-control" />

berfungsi untuk tampilan field pencarian nama mahasiswa. Sedangkan pada kode berikut

<ul class="list-group" id="resultlist"></ul>

1	<ul class="list-group" id="resultlist"></ul>

adalah untuk menampilkan hasil dari pencarian.

5. Kemudian masih di file index.php kita masukkan javascriptnya di tag <body> paling bawah atau diatas tag penutup </body> scriptnya seperti dibawah

<script>
  $(document).ready(function(){
    $.ajaxSetup({ cache: false });
    $('#nama_mahasiswa').keyup(function(){
        $('#resultlist').html('');
        $('#state').val('');
        let nama_mahasiswa = $('#nama_mahasiswa').val();
                
        $.ajax({
            type: 'POST',
            url: "get_data.php",
            data: {nama_mahasiswa:nama_mahasiswa},
            success: function(data) {
              $.each(JSON.parse(data), function(key, value){
                $('#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>

$(document).ready(function(){

$.ajaxSetup({ cache: false });

$('#nama_mahasiswa').keyup(function(){

$('#resultlist').html('');

$('#state').val('');

let nama_mahasiswa = $('#nama_mahasiswa').val();

$.ajax({

type: 'POST',

url: "get_data.php",

data: {nama_mahasiswa:nama_mahasiswa},

success: function(data) {

$.each(JSON.parse(data), function(key, value){

$('#resultlist').append(`

<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>

6. Seperti yang sobat bisa lihat pada step nomor 5, ajax mengarah ke url: “get_data.php”, yang mana sobat harus membuat file get_data.php. Namun jika sobat menggunakan framework maka sobat hanya perlu mengarahkan url ke routingnya. Isikan file get_data.php dengan script dibawah

<?php
    include 'koneksi.php';

    $nama_mahasiswa =  '%' . htmlspecialchars($_POST['nama_mahasiswa']) . '%';

    $i = 1;
    $query = "SELECT * FROM tbl_mahasiswa WHERE nama_mahasiswa LIKE ? ORDER BY nama_mahasiswa ASC LIMIT 10";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param("s", $nama_mahasiswa);
    $dewan1->execute();
    $res1 = $dewan1->get_result();
    while ($row = $res1->fetch_assoc()) {
        $data[$i]['id'] = $row['id'];
        $data[$i]['nama_mahasiswa'] = $row['nama_mahasiswa'];
        $data[$i]['alamat'] = $row['alamat'];
        $data[$i]['avatar'] = $row['avatar'];

        $i++;
	} 

    $out = array_values($data);
    echo json_encode($out);
?>