Pencarian Data Dengan Jquery

 

  1. Pengertian Jquery

jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalahkumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.

jQuery dikembangkan pertama kali oleh John Resig di tahun 2006. Sejak saat itu, jQuery berkembang menjadi proyek opensource dan menjadi libary JavaScript paling populer di dunia. Untuk Menggunakan Jquery , silahkan download di  jquery.com

 

  1. Pencarian Data dengan Jquery

Pertama-tama buat folder dengan nama filter . Lalu download file jquery di jquery.com . Kemudian simpan file jquery ke dalam folder filter. Lalu buat file dengan nama filter_jquery.html . Kemudian masukkan script di bawah ini ke dalam file filter_jquery.html

 

 

<!DOCTYPE html>

<html>

<head>

<script src=”jquery.js”></script>

<script>

$(document).ready(function(){

$(“#myInput”).on(“keyup”, function() {

var value = $(this).val().toLowerCase();

$(“#myTable tr”).filter(function() {

$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

});

});

});

</script>

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

 

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

 

tr:nth-child(even) {

background-color: #dddddd;

}

</style>

</head>

<body>

 

<h2>Table Pencarian</h2>

<p>Ketikkan nama atau email untuk mencari data di dalam tabel</p>

<input id=”myInput” type=”text” placeholder=”cari..”>

<br><br>

 

<table>

<thead>

<tr>

<th>Nama Awal</th>

<th>Nama Akhir</th>

<th>Email</th>

</tr>

</thead>

<tbody id=”myTable”>

<tr>

<td>Muhammad</td>

<td>Bashir</td>

<td>bashir@example.com</td>

</tr>

<tr>

<td>Dodi</td>

<td>Novarian</td>

<td>dodi@mail.com</td>

</tr>

<tr>

<td>Dani</td>

<td>Eka</td>

<td>dani@greatstuff.com</td>

</tr>

<tr>

<td>Kiki</td>

<td>Nur</td>

<td>nur@test.com</td>

</tr>

</tbody>

</table>

 

<p>Catatan : Id Pencarian di mulai pada tag tbody , agar pencarian tidak mengarah pada theaders</p>

 

</body>

</html>

 

Maka tampilan dari script di atas seperti ini :

Maka ketika diketikkan kata pada pencarian data akan memilih secara otomatis sesuai dengan kata yang di masukkan 

 

Created By : Muhammad Bashir