Cara Membuat Pencarian Otomatis Menggunakan Jquery

jQuery adalah perpustakaan JavaScript. Itu membuat hal-hal seperti manipulasi tag HTML menjadi lebih mudah seperti penanganan event, animasi, dan Ajax jauh lebih sederhana dengan API yang mudah digunakan yang bekerja di banyak browser. Dengan kombinasi fleksibilitas dan diperpanjang, jQuery telah mengubah cara jutaan orang menulis JavaScript. Pada tutorial kali ini saya akan membahas tentang Cara Membuat Pencarian Otomatis Menggunakan Jquery.

Jangan berlama-lama saya akan mencoba memberikan langkah-langkah untuk tutorial kali ini yaitu tentang Cara Membuat Pencarian Otomatis Menggunakan Jquery. Di sini saya menggunakan jquery versi 1.7.1. Ok, langsung saja kita mulai langkah-langkahnya:

-Pertama teman-teman buka text editor teman-teman dan buat 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>Dumetschool</h1>

<input type="text" id="search" placeholder="Type to search"><!-- id search berfungsi untuk inputan yang akan di proses oleh 
javascript-->

<table id="table"><!--table berfungsi sebagai 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 tentang id ada di commenting pada tag html di atas. coba teman-teman jalankan pada browser teman-teman dan masukan kata Apple pada form input, maka tidak 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 untuk menampung nilai yang berda di dalam 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 tentang kode di atas ada pada commenting yang sudah saya berikan. Coba teman-teman refresh index yang tadi kita buka di browser, lalu inputkan lagi nilai Apple maka akan tampil seperti gambar di bawah:

maka yang akan tampil adalah 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 fungsi pencariannya silahkan.

Sekian tutorial kali ini tentang Cara Membuat Pencarian Otomatis Menggunakan Jquery. Selamat mencoba teman-teman jangan lupa untuk sehat selalu yah.

Cara Membuat Pencarian Otomatis Menggunakan Jquery

Kategori