Selamat malam semua berhubungan saya membuat artikel ini malam hari haha,
maaf kalau artikelnya bahasanya tidak formal oke :), setelah sekian lama tidak membuat sebuah artikel di blog saya yang sudah berkali-kali berganti blog juga, ini artikel pertama saya di tahun 2016 karena sudah lama berhenti karena menjalani kehidupan asrama menjadi santri di kota cianjur :D.
karena sudah bosan bermain game sepulag kerja dan terinspisari dari sebuah kiriman pertanyaan di sebuah group yang sangat terkenal yaitu php indonesia ada seseorang yang mencari bagaimana membuat pencarian seperti halnya di foxpro kalau di kantor saya itu di sebut browstec kalau gak salah, ketika kita ingin mencari id dari sebuah data di textbox kita tinggal tekan enter 2x dan akan muncul sebuah form atau tab yang berisi data lengkap dan blabala :),
oke dari pada banyak cerita kita langsung simak cara membuat pencarian menggunakan modal bootsrap.
gambar 1.0 adalah tampilan awal
gambar 1.1 ketika cursor berada dalam textbox modal akan muncul
di saat id mahasiswa di klik atau kolomnya di klik data masuk ke dalam textbox
pertama membuat tag html dahulu dan copy paste syntax html di bawah
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<body>
<div class="container">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Data Mahasiswa</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="varchar">ID Mahasiswa</label>
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control pencarian" placeholder="Nomor Induk Mahasiswa" id="textbox"><br>
</div>
</div>
</div>
<input type="submit" value="Simpan" class="btn btn-parimary">
</form>
</div>
</div>
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">DATA MAHASISWA</h4>
</div>
<div class="modal-body">
<table id="example" class="table table-bordered">
<thead>
<tr>
<th>ID MHS</th>
<th>NAMA MHS</th>
</tr>
</thead>
<tbody>
<tr id="data" onClick="masuk(this,'MHS001')" href="javascript:void(0)">
<td><a id="data" onClick="masuk(this,'MHS001')" href="javascript:void(0)">MHS001</a></td>
<td>Muhammad Iqbal Ramadhan</td>
</tr>
<tr id="data" onClick="masuk(this,'MHS002')" href="javascript:void(0)">
<td><a id="data" onClick="masuk(this,'MHS002')" href="javascript:void(0)">MHS002</a></td>
<td>Muhammad Ramdan Fauzi</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
//focusin berfungsi ketika cursor berada di dalam textbox modal langsung aktif
$(".pencarian").focusin(function() {
$("#myModal").modal('show'); // ini fungsi untuk menampilkan modal
});
$('#example').DataTable(); // fungsi ini untuk memanggil datatable
});
// function in berfungsi untuk memindahkan data kolom yang di klik menuju text box
function masuk(txt, data) {
document.getElementById('textbox').value = data; // ini berfungsi mengisi value yang ber id textbox
$("#myModal").modal('hide'); // ini berfungsi untuk menyembunyikan modal
}
DEMO DISINI
jangan lupa untuk like facebook fanspage saya catatan iqbal poenya
CSS
javascript
