Tunggu Sebentar ...

Autocomplete JQUERY UI Sederhana Dengan PHP

Ditulis oleh

Waktu itu saya pernah nulis juga tentang autocomplete, tapi waktu itu autocomplete bootstrap. Tapi kali ini tentang autocomplete jqueryui. Untuk itu, diperlukan jquery ui dalam proses pembuatan autocomplete ini, jika belum ada jquery ui nya, silakan download terlebih dahulu jquery-ui nya.

Pada catatan ini, saya buat 3 file. Yaitu : koneksi.php, index.php, dan caripegawai.php. Contoh yang dibuat adalah mencari data pegawai berdasarkan nama. Jika sudah dipilih nama pegawai yang diinginkan, maka otomatis akan tampil data si pegawai tersebut dalam form.

#1. koneksi.php

<?php
  /*******************************************
    Autocomplete form dengan jqueryui
 
    Dibuat oleh : Danni Moring
    pemrograman : PHP
    ******************************************/

   /************* Ini untuk koneksi kedatabase nya, sesuaikan **********/

   $server = "localhost";
   $user = "root";
   $pass = "";
   $db = "test";
  
   $database = new mysqli($server, $user, $pass, $db); 
   /*********************************************************/
?>

#2. index.php

<html>
<head>
<meta charset="utf-8">
<title> Autocomplete form dengan jqueryui</title>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">

</head>
<body>
<form id="frmpegawai">
Cari Pegawai <input type="text" id="cari_pegawai" autocomplete="off" placeholder="Cari Pegawai">
<div>
Nama
</div>
<div>
<input type="text" id="nama_pegawai" readonly>
</div>
<div>
Alamat
</div>
<div>
<textarea id="alamat" readonly></textarea>
</div>
<div>
Telepon
</div>
<div>
<input type="text" id="telp" readonly>
</div>
<div>
Jenis Kelamin
</div>
<div>
<input type="text" id="jenis_kelamin" readonly>
</div>
</form>
<script src="jquery.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script>

   /* autocomplete */
   $('#cari_pegawai').autocomplete({
		delay: 0,
		source: function( request, response ) {
		 
		  $.ajax({
			url: 'caripegawai.php',
			dataType: "json",
			data: 'cari=' + request.term,
			success: function( data ) {
			  
			  response( $.map( data, function( item ) {
				return {
				  label  : item.nama_pegawai,
				  alamat : item.alamat,
				  telp   : item.telp,
				  jk     : item.jenis_kelamin
				 
				}
			   }));
			},
			error: function(e){  
			  alert('Error: ' + request);  
			}  
		   });
		},
		minLength: 1,
		select: function( event, ui ) {
		  /* ketika nama yang dicari diklik, maka ditampilkan di form */
		  $('#nama_pegawai').val(ui.item.label);
		  $('#alamat').val(ui.item.alamat);
		  $('#telp').val(ui.item.telp);
		  $('#jenis_kelamin').val(ui.item.jk);
		  $('#cari_pegawai').val("");
		  return false;
		},
		focus: function(event, ui) {
			return false;
		}
	});
   
   /* @end autocomplete */
</script>
</body>
</html>

#3. caripegawai.php

<?php
   include "koneksi.php"; //menyisipkan file koneksi.php
   $cari = isset($_GET['cari']) ? mysqli_real_escape_string($database,$_GET['cari']):'';
   $data = array();
   $sql  = "select * from pegawai where nama_pegawai LIKE '".$cari."%'";
   
   if($res = $database->query($sql)) {
      while ($row = $res->fetch_assoc()) {
	   $data[] = $row;
      }
   }
   echo json_encode($data);
   
   /* tutup koneksinya */
   $database->close();
?>

Untuk demonya, silakan klik disini. Disini memang engga difokuskan pada tampilan yang menarik untuk formnya, tetapi pada fungsi autocomplete-nya. Jika ingin memperbagus desainnya, silakan nge-css sendiri aja ya

Untuk datatabasenya :

DROP TABLE IF EXISTS `pegawai`;

CREATE TABLE `pegawai` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_pegawai` varchar(50) DEFAULT NULL,
  `alamat` text,
  `telp` varchar(20) DEFAULT NULL,
  `jenis_kelamin` enum('Laki-laki','Perempuan') DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

/*Data for the table `pegawai` */

insert  into `pegawai`(`id`,`nama_pegawai`,`alamat`,`telp`,`jenis_kelamin`) values (1,'Danni Moring','Jl. Pinang dibelah kampak. No 404','1234567','Laki-laki'),(2,'Budi','Jl. Pinang dibelah-belah No. 403','1234568','Laki-laki'),(3,'Wati','Jl. Flamboyan 108','8765432','Perempuan'),(4,'Saras','Jl. superhero saras 008','5132456','Perempuan'),(5,'Panji Millenium','Jl. Superhero 2000','1512152','Laki-laki'),(6,'Wiro Sableng','Jl. Sableng 212','2122122','Laki-laki');

 

Ditumpuk didalam berkas : Catatan Belajar , PHP , MySQL / Mysqli
Yang berkomentar (18)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Autocomplete JQUERY UI Sederhana Dengan PHP"

aji
11-02-2017 21:09

mas, terimakasih sebelumnya untuk tutorialnya.
klo misal caripegawai.php nya disimpen di model codeigniter cara manggil di url ajax nya gimana yah?

Komentar via web

Balas
Danni Moring
11-02-2017 22:05

ya sama aja mas sebenarnya....tinggal masukkan aja url untuk menghasilkan data json dengan CI....

Komentar via web

Balas
hdi
27-09-2016 14:12

Mas kalo mau nambahin tanggal lahir dan umur gimana ya?

Komentar via web

Balas
Danni Moring
27-09-2016 18:39

ya tinggal tambahin aja tgl lahir kyk contoh diatas (nama,tlp,alamat, dll)..utk umur, coba search di google cara menghitung umur / hari

Komentar via web

Balas
sondang
16-08-2016 15:06

kalau jenis kelaminnya saya ganti jadi radio button gmn gan?

Komentar via web

Balas
Danni Moring
16-08-2016 15:33

di radio buttonnya dibuat id aja...
<input type='radio' id='laki' name='jeniskelamin' value='1' />
<input type='radio' id='cewe' name='jeniskelamin' value='2' />

dibagian select: function( event, ui ) {

if(ui.item.jk == '1') {
$( "#laki" ).prop( "checked", true );
} else {
$( "#cewe" ).prop( "checked", true );
}

btw code di komen ini belum saya coba... silakan dicocok2an aja...

Komentar via web

Balas
sondang
18-08-2016 08:50

terima kasih mas danni, sudah terjawab.
nah kalau untuk yang comobobox (ambil data dari database) atau combobox (tidak ambil data dari database) perlakuannya sama??
makasih mas

Komentar via web

Balas
sondang
18-08-2016 09:11

untuk yang jquery nya sudah bisa mas danni, namun, ketika saya masukkan nomor, maka muncul nama dan jenis kelaminnya sesuai, tapi ketika nomor tersebut saya hapus, maka nama muncul, tapi jenis kelaminnya gak berubah mas?
terkecuali saya refresh ulang, baru berjalan?
mohon solusinya mas?
terima kasih

Komentar via web

Balas
Danni Moring
18-08-2016 10:56

pada dasarnya ya hampir sama, cuma dikulik lagi aja

Komentar via web

Balas
Danni Moring
18-08-2016 10:56

masukkan nomor apa ya ?

Komentar via web

Balas
sondang
18-08-2016 12:07

misalakan saya masukkan nomor antrian 002
kemudian muncul nama pasien dan jenis kelamin nya sesuai,
kemudia saya coba masukkan nomor antrian 003
nama muncul tapi jenis kelaminnya tidak sesuai, tapi kalau saya refresh kembali trus saya masukkan nomor 003, namanya dan jenis kelaminnya sesuai.

itu kalau di refresh mas?

makasih

Komentar via web

Balas
Danni Moring
18-08-2016 13:14

coba km pelan2 cek lagi code-nya.... harusnya sih berubah. kalau di contoh saya, demo nya berubah jenis kelaminnya, meski dari contohnya jenis kelaminnya cuma berupa informasi yang diletakkan di textbox aja. Harusnya dengan radio button, juga berubah.

Komentar via web

Balas
Ary
02-05-2016 16:50

untuk file jquery bisa send email gan?? susah downloadnya wigrahaa@gmail.com

Komentar via web

Balas
Danni Moring
02-05-2016 17:42

bukannya sama aja klo saya kirim email, toh km download juga kan dari email ?

Komentar via web

Balas
baciru
06-04-2016 15:56

Trims tutorialnya... sangat membantu

Komentar via web

Balas
Danni Moring
06-04-2016 16:35

sama-sama

Komentar via web

Balas
denny septiady
19-08-2015 23:19

Ini gan yang selama ini saya chari thanks banget yah ..

Komentar via web

Balas
Danni Moring
21-08-2015 12:38

sama-sama...

Komentar via web

Balas