Script mudah membuat simple lookup dengan popup Colorbox

by admin · Published December 7, 2015 · Updated October 2, 2017

Script lookup berfungsi untuk mengambil data tertentu dari list data.

Bagi yang mencari scr ipt simple lookup dengan popup colorbox:

1. Pertama-tama buat table pegawai di database test

CREATE TABLE `pegawai` (
 `no_int` int(5) NOT NULL auto_increment,
 `NIP` char(5) collate latin1_general_ci default NULL,
 `nama` varchar(30) collate latin1_general_ci NOT NULL,
 `umur` int(2) NOT NULL,
 `alamat` varchar(100) collate latin1_general_ci NOT NULL,
 PRIMARY KEY (`no_int`)
);

2. Create file index.html dengan code berikut:

<html>
<head>
 <title>Searching By Ajax</title>
 <link rel="stylesheet" href="css/colorbox.css" />
 <script src="js/jquery.min.js"></script>
 <script src="js/jquery.colorbox.js"></script>
 <script>
 $(document).ready(function(){
 //Examples of how to assign the ColorBox event to elements

$(".ajax").colorbox({width:'650px',height:'450px'});
 
 });
 </script>

<script language="javascript">

var my_variable = new Array(); // for example
 
 function passingToParent(){
 
 arrayOfStrings = my_variable[0].split(',');
 
 for (var i=1; i < my_variable.length; i++) {
 $('#' + arrayOfStrings[i-1]).val(my_variable[i]);
 }
 // single form
 //parent.$.fn.colorbox.close();

// framework form
 jQuery.colorbox.close();;
 }

</script> 
 
 
 <style>
 body,table,input{
 font-size:12px
 }
 </style>
</head>
<body>
 <form action="" method="post">
 Pilih Pegawai: 
 <input type="text" id="no_int" name="no_int" size="5" readonly />
 <input id="id" type="text" name="pegawai" size="10" readonly /> 
 <input type="text" id="nama_pegawai" name="nama_pegawai" size="50" readonly /> 
 <a href="daftar_pegawai.php" class="ajax" onClick="my_variable[0]='no_int,id,nama_pegawai'">
 <img src="button_search.png" border="0" /></a>
 
 <small id="divAlertPegawai"></small>
 </form> 
</body>
</html>

3. Create file daftar_pegawai.php dengan code berikut:

<input type="text" name="cari" id="cari" onKeyPress="return disableEnterKey(event)" />
<input type="button" name="submit" value="cari" onClick="findRecord()" /> <br /><br />

<script language="javascript">
 
 // untuk menghapus baris atau data pada table pegawai
 function findRecord(){ // ID dari record pegawai dikirimkan sebagai parameter
 $.post(
 'cari_pegawai.php', {cari: $("#cari").val() },
 function(response){
 //if(response == 'ok') // jika respon dari delete.php adalah 'ok' 
 $('#result').html(response); // hapus 1 baris
 //else 
 // alert('Delete gagal');
 }
 );
 }
 
 function disableEnterKey(e){
 var key;
 if(window.event)
 key = window.event.keyCode; //IE
 else
 key = e.which; //firefox
 if (key == 13) {
 findRecord();
 return false;
 } else
 return true;
 } 
 </script>
 
<div id="result">

<?php include "cari_pegawai.php"; ?>
 
</div>

4. Create file cari_pegawai.php dengan code berikut:

<script language="javascript">
 function getSelected(no_int, id, nama){ 
 
 var args = new Array();
 
 for (var i = 0; i < arguments.length; i++)
 window.parent.my_variable[i+1] = arguments[i];
 
 window.parent.passingToParent();
 }

</script>
<style>
table {
 border-collapse: collapse;
 width: 100%;
}

th, td {
 text-align: left;
 padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
 background-color: #4CAF50;
 color: white;
}
</style>
 
<?php

 $mysqli = new mysqli("localhost", "admin", "", "test");
 
 $ssql = "SELECT * FROM pegawai 
 WHERE nip like '%$_POST[cari]%'
 or nama like '%$_POST[cari]%'";
 $query = $mysqli->query($ssql);
 
?>
<table bgcolor="#000000" cellspacing="1" cellpadding="3"> 
 <tr bgcolor="#DDDDDD">
 <th>No. Peg</th>
 <th>Nama</th>
 <th>Umur</th>
 <th>Alamat</th>
 </tr>
 <?php while($row = $query->fetch_object()): ?>
 
 <tr bgcolor="#FFFFFF"> 
 <td align="center">
 <a href="javascript:getSelected('<?=$row->no_int?>','<?=$row->NIP?>','<?=$row->nama?>')">
 <?=$row->NIP?>
 </a>
 </td>
 <td><?=$row->nama?></td>
 <td align="center"><?=$row->umur?></td>
 <td><?=$row->alamat?></td>
 </tr>
 <?php endwhile; ?>
</table>

Berikut link download file sample simple lookup dengan popup colorbox.