Membuat Fungsi Cari dengan Script Javascript

Javascript adalah sebuah bahasa pemrogramman yang tidak hanya di gunakan di sisi client tapi juga disisi server sudah bisa digunakan, banyak sekali aplikasi 2 yang sudah dibuat baik skala besar maupun kecil, juga website website dengan tampilan yang sangat interaktif tidak lepas dari bahasa pemrogramman ini, menjadikan bahasa ini banyak sekali yang membutuhkan dan banyak sekali yang mempelajarinya. Nah kali ini saya akan menshare bagaimana cara Membuat Fungsi Cari dengan Script Javascript. Oke langsung saja kita praktekan teman teman.

ketikan kode HTML di bawah ini dan berinama dengan nama index.html.

<!DOCTYPE html>
<html>
<head>
  <title> Fungsi Cari dengan Javascript </title>
  <link rel="stylesheet" href="style.css" type="text/css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>

<h2 style="text-align: center;">Data Member</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Cari Nama" title="Type in a name">

<table id ="myTable">
  <tr class ="header">
    <th style ="width:30%;"> Nama </th>
    <th style ="width:30%;"> Umur </th>
    <th style ="width:30%;"> Alamat </th>
    <th style ="width:30%;"> Pendidikan </th>


  </tr>
  <tr>
    <td>  Fredi Sulistiya </td> 
    <td>  30 </td>
    <td>Jakarta</td> 
    <td>Sarjana</td>
  </tr>
  <tr>
    <td> Ambar Sutaya </td> 
    <td> 32 </td>
    <td>Surabaya</td> 
    <td>SMA</td>
  </tr>
  <tr>
    <td> Hartono </td> 
    <td> 29 </td> 
    <td>Cilegon</td>
    <td>S2</td>
  </tr>
  <tr>
    <td> Wiwin Wartini </td> 
    <td> 24 </td> 
    <td>Serang</td>
    <td>Sarjana</td>
  </tr>
  <tr>
    <td> Wirda Sumantri </td> 
    <td> 35 </td> 
    <td>Bekasi</td>
    <td>S3</td>
  </tr>
  <tr>
    <td> Andri Sutandri </td> 
    <td> 29 </td> 
    <td>Bogor</td>
    <td>S2</td>
  </tr>
  <tr>
    <td> Witoko Gigih </td> 
    <td> 45 </td> 
    <td>Jogjakarta</td>
    <td>Diploma</td>
  </tr>
  <tr>
    <td> Kokom Komariah </td> 
    <td> 40 </td> 
    <td>Solo</td>
    <td>S2</td>
  </tr>
</table>

</body>
</html>

Sebelum penutug tag body ketikan kode javascript berikut.

<script>

function myFunction() {

var input, filter, table, tr, td, i;

input = document.getElementById(“myInput”);

filter = input.value.toUpperCase();

table = document.getElementById(“myTable”);

tr = table.getElementsByTagName(“tr”);

for (i = 0; i < tr.length; i++) {

td = tr[i].getElementsByTagName(“td”)[0];

if (td) {

if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

tr[i].style.display = “”;

} else {

tr[i].style.display = “none”;

}

}

}

}

</script>

Buat kode css dibawah ini dan beri nama dengan nama style.css

style.css

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

Bila sudah kalian bisa ketikan pencarian berdasarkan nama di input cari, hasilnya sesuai dengan yang diketikan dan tanbpa perlu mereload halaman nya, menarik bukan. 😀

Sekian tutorial Membuat Fungsi Cari dengan Script Javascript semoga bermanfaat…