Membuat Fungsi Cari dengan Script Javascript
Javascript ialah sebuah bahasa pemrogramman yang tak hanya di gunakan di sisi client tapi pun disisi server telah dapat digunakan, banyak sekali program 2 yang telah dibangun bagus skala besar maupun kecil, pun situs situs dengan tampilan yang benar-benar interaktif tak 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 seketika saja kita praktekan teman teman.
ketikan kode HTML di bawah ini dan berinama dengan nama index.html.
<!DOCTYPE html>
<html>
<head>
<title> Kegunaan 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=Javascript ialah sebuah bahasa pemrogramman yang tak hanya di gunakan di sisi client ta Merancang Kegunaan Cari dengan Script Javascript title=Merancang Kegunaan Cari dengan Script Javascript />
</head>
<body>
<h2 style=text-align: center;>Data Anggota</h2>
<input type=text id=myInput onkeyup=myFunction() placeholder=Cari Nama title=Merancang Kegunaan Cari dengan Script Javascript>
<table id =myTable>
<tr class =header>
<th style =width:30%;> Nama </th>
<th style =width:30%;> Umur </th>
<th style =width:30%;> Domisili </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>
Bikin 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 telah kalian dapat ketikan pencarian merujuk pada nama di input cari, hasilnya sesuai dengan yang diketikan dan tanbpa perlu mereload halaman nya, menarik bukan. 😀
Demikian panduan Membuat Fungsi Cari dengan Script Javascript semoga bermanfaat…
Sumber https://kursuswebsite.org
