Cara membuat auto complete search menggunakan ajax
Membuat auto complete search atau pencarian otomatis pada dasarnya hampir sama dengan cara pada artikel ane Mengisi form otomatis dengan ajax. Bedanya adalah pada artikel tersebut memakai combo box. Nah disini akan ane jelaskan bagaimana cara membuatnya untuk input text field yang bisa difungsikan sebagai pencarian otomatis atau bisa juga untuk pengisian form otomatis. Yuk ikutin langkah – langkah pembuatannya.
Kali ini ane menggunakan jQuery dan jQuery-UI serta bootstrap untuk membuat auto complete search supaya memudahkan pemakaian javascript, ajax dan stylenya. Selanjutnya buatlah sebuah file php atau html, misalnya cari.php dan isi file tersebut dengan script sebagai berikut:
<html>
<head>
<title>Cara membuat auto complete search menggunakan ajax</title>
</head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-dialog-min.css">
<body>
<form class="form-horizontal" action="<?php $_SERVER['PHP_SELF']; ?>" method="post" autocomplete="off">
<fieldset style="width: 50%; margin: 0 auto;">
<center><legend>Form Pencarian</legend></center>
<div class="form-group">
<label class="col-md-4 control-label" for="txtNumber">Nomor Induk</label>
<div class="col-md-5">
<input id="txtNumber" name="txtNumber" placeholder="tulis nomor induk" class="form-control input-md" required="" type="text">
<span class="help-block" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="txtName">Nama</label>
<div class="col-md-5">
<input id="txtName" name="txtName" class="form-control input-md" required="" type="text" readonly>
<span class="help-block" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="txtEmail">Email</label>
<div class="col-md-5">
<textarea id="txtEmail" name="txtEmail" class="form-control input-md" required="" readonly></textarea>
<span class="help-block" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="txtPhone">Telepon</label>
<div class="col-md-5">
<input id="txtPhone" name="txtPhone" class="form-control input-md" required="" type="text" readonly>
<span class="help-block" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="txtAlasan">Alasan</label>
<div class="col-md-5">
<input id="txtAlasan" name="txtAlasan" placeholder="tulis alasan" class="form-control input-md" required="" type="text">
<span class="help-block" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="btnSimpan"></label>
<div class="col-md-4">
<button id="btnSimpan" name="btnSimpan" class="btn btn-primary">Simpan</button>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap-min.js"></script>
<script type="text/javascript" src="js/bootstrap-dialog-min.js"></script>
<script type="text/javascript" src="js/cari.js"></script>
</body>
</html>
Silahkan disesuaikan dengan bentuk design, isi content, dan url asset / resources sesuai dengan kebutuhan ente. Pada code diatas, terdapat sebuah asset js “cari.js”. File cari.js merupakan code javascript yang akan kita buat. Berikut ini penampakannya:
$(document).ready(function() {
var txtNumber = $('#txtNumber');
var txtName = $('#txtName');
var txtEmail = $('#txtEmail');
var txtPhone = $('#txtPhone');
var charLength = 3;
$('#txtNumber').autocomplete({
source: 'caridata.php',
minLength: 3,
select: function(evt, data) {
txtName.val(data.item.name);
txtEmail.val(data.item.email);
txtPhone.val(data.item.phone);
}
});
});
Lah dikit amat code nya mas broh? Ya mau gimana lagi, emang cuma segitu. Lagian itu juga blom disesuaikan dengan script punya ente. Perintah $(‘#txtNumber’).autocomplete() berasal dari plugin jquery-ui, disitulah salah satu kunci keberhasilan auto complete search menggunakan ajax-nya. Nah pada code diatas juga terdapat “source’. Source tersebut bisa berisi array, object, function, atau nama file php untuk mengambil dari data server, tentunya dengan bantuan php. Yuk mari kita lihat isi file caridata.php:
<?php
$data = file_get_contents('data.json');
$data = json_decode($data);
$output = array();
foreach ($data as $k => $v) {
if (preg_match("/".$_GET['term']."/", $v->number)) {
$output[] = (object) array(
'id' => $v->number,
'label' => $v->number.' - '.$v->name,
'value' => $v->number,
'name' => $v->name,
'email' => $v->email,
'phone' => $v->phone
);
}
}
echo json_encode($output);
?>
Dalam auto complete search menggunakan ajax ini ane tidak menggunakan data yang berasal dari database, melainkan dari sebuah yang menyimpan data dalam bentuk json. Jika ente ingin menggunakan database, silahkan aja, ga masalah kok, tinggal diganti aja $data-nya. Trus isi file data.json itu apa? Nih isinya:
[{
"number": "1111",
"name": "John Doe",
"email": "johndoe@mail.com",
"phone": "1234567890"
}, {
"number": "1112",
"name": "Doel Sumbang",
"email": "doel@mail.com",
"phone": "0987654321"
}, {
"number": "1113",
"name": "Bapak Kita Kartono",
"email": "bapakkitakartono@mail.com",
"phone": "28394090890"
}]
Gampangkan buatnya? Demikianlah artikel Cara membuat auto complete search menggunakan ajax, jika ada yang kurang jelas atau mau memberikan saran, silahkan diisi comment nya yah. BTW penampakan hasilnya sama seperti gambar diawal artikel ini.
About the Author
Apri Pardede
Ingin selalu berbagi ilmu bermanfaat yang kumiliki.
Permisi mastah,
Minta contoh kalo yang di ambil datanya dari database itu gimana yah..? udah ubah $data tapi masih belum bisa.
Terimakasih
Agan pake framework PHP? Pada contoh artikel diatas, $data bertype object, pastikan $data yang agan buat bukan dalam bentuk array biasa.
Sorry mastah,
minta tolong tutorial kalau otomatisasinya dari database yang sudah kita buat di phpmyadmin nya. ane masih belum ngerti sama maksudnya.
Waduh… mohon maaf gan, ane baru liat ada comment baru.
Ane usahakan gan, dalam waktu dekat ane buatkan artikelnya.
itu file json isi disesuaikan atau gak? kallo disesuaikan bagaimana?
Disesuaikan dengan kondisi tempat agan.