Cara Membuat Pencarian Otomatis Menggunakan Jquery
jQuery ialah perpustakaan JavaScript. Itu merancang hal-hal seperti manipulasi tag HTML menjadi lebih gampang seperti penanganan event, animasi, dan Ajax jauh lebih sederhana dengan API yang gampang digunakan yang bekerja di banyak browser. Dengan kombinasi fleksibilitas dan diperpanjang, jQuery telah mengubah cara jutaan orang menulis JavaScript. Di panduan kali ini saya akan membahas mengenai Cara Membuat Pencarian Otomatis Menggunakan Jquery.
Jangan berlama-lama saya akan mencoba memberikan strategi bagi panduan kali ini yaitu mengenai Cara Membuat Pencarian Otomatis Menggunakan Jquery. Di sini saya menggunakan jquery versi 1.7.1. Ok, seketika saja kita mulai langkah-langkahnya:
-Pertama-tama teman-teman buka text editor teman-teman dan bikin tag HTML di bawah ini lalu save dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar JS</title>
<style type=text/css>
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
</style>
</head>
<body>
<h1>Source Code Aplikasi</h1>
<input type=text id=search placeholder=Type to search><!-- id search berfungsi bagi inputan yang akan di proses oleh
javascript-->
<table id=table><!--table berfungsi selaku penampung nilai yang akan kita cari -->
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
</body>
</html>
penjelasan mengenai id ada di commenting di tag html di atas. coba teman-teman jalankan di browser teman-teman dan masukan kata Apple di form input, karenanya tak ada yang terjadi karena kita belum hubungkan dengan jQuery nya. Tampilannya akan menjadi seperti gambar di bawah ini:
– Kedua, teman-teman hubungkan jQuernya dan tuliskan kode javascriptnya setelah tag penutup table. Berikut kodenya:
<script type=text/javascript src=http://code.jquery.com/jquery-1.7.1.js></script><!-- link jquery -->
<script type=text/javascript>
var $rows = $('#table tr'); <!--berfungsi bagi menampung nilai yang berda di pada tabel-->
$('#search').keyup(function()<!--proses pengolahan nilai inputan--> {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
<
$rows.show().filter(function() {
var text = $(this).text().replace(/s+/g, ' ').toLowerCase();
return ! text.indexOf(val);
}).hide();
});
</script>
Penejelasan mengenai kode di atas ada di commenting yang telah saya berikan. Coba teman-teman refresh index yang tadi kita buka di browser, lalu inputkan lagi nilai Apple karenanya akan tampil seperti gambar di bawah:
karenanya yang akan tampil ialah table yang terdapat nilai “Apple” saja.
Bagaimana teman-teman mudahkan Membuat Pencarian Otomatis Menggunakan Jquery. Silahkan teman-teman coba dan apabila teman-teman ingin memodifikasi guna pencariannya silahkan.
Sekianlah panduan kali ini mengenai Cara Membuat Pencarian Otomatis Menggunakan Jquery. Selamat mencoba teman-teman jangan lupa bagi sehat selalu yah.
Sumber https://kursuswebsite.org
