Menampilkan data di situs web mempunyai banyak pilihan tempat dari setiap sudut layout yang ada, termasuk di dropdown. Dropdown ini umumnya digunakan sebagai penampil menu pada navbar, ketika dropdown dibuka maka akan menampilkan satu atau beberapa sub-menu di bawahnya.
Sebetulnya dropdown ini bisa dimanfaatkan lebih daripada sekedar digunakan sebagai dropdown menu, misalnya digunakan untuk menampilkan beberapa data user, tag, atau kategori. Namun kelemahannya dropdown ini akan terlihat jelek jika digunakan untuk menampilkan terlalu banyak item di dalamnya karena akan memanjang ke bawah sesuai data yang ditampilkan, tampilkan beberapa item saja agar terlihat menarik dan gunakan sistem pencarian / penyaringan di dropdown untuk membantu para visitor mudah menemukan apa yang mereka cari dari item-item yang ada.
Filterable Dropdown – Bootstrap
Membuat filter di dropdown ini tidak berbeda jauh dengan filter di table Bootstrap seperti yang pernah dibahas pada pos sebelumnya, hanya letak filternya saja yang berbeda.
Pada kolom pencarian, ketika mengetikkan satu karakter atau lebih yang dimiliki oleh item di dalam dropdown tersebut maka data yang mirip itu akan tampil. Pada gambar di atas, hanya ada 1 item yang mirip atau memiliki angka 5 yaitu Kategori 5 maka ia tampil sendirian.
<h2>Filter Dropdown Bootstrap</h2>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Tombol Dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<input class="form-control" id="filterTable" type="text" placeholder="Cari Disini..">
<li><a href="#">Kategori 1</a></li>
<li><a href="#">Kategori 2</a></li>
<li><a href="#">Kategori 3</a></li>
<li><a href="#">Kategori 4</a></li>
<li><a href="#">Kategori 5</a></li>
<li><a href="#">Kategori 6</a></li>
<li><a href="#">Kategori 7</a></li>
<li><a href="#">Kategori 8</a></li>
<li><a href="#">Kategori 9</a></li>
<li><a href="#">Kategori 10</a></li>
</ul>
</div>
Salin kode di atas untuk mulai membuat dropdown menu dan item-item di dalamnya. Pada tutorial ini kita gunakan tombol berwarna hijau bawaan Bootstrap (btn-success), untuk mengganti style tombol bisa lihat di Cara Membuat Tombol Bootstrap.
Selanjutnya, terapkan jQuery sebelum tag penutup </body>:
<script>
$(document).ready(function(){
$("#filterTable").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".dropdown-menu li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
Pada script ini terdapat #filterTable, ini adalah id yang digunakan pada dropdown yang baru saja kita buat. Pastikan id ini sesuai !
Filter Bootstrap ini bekerja secara live atau biasa disebut live filtering, sehingga apapun yang diinput pada kolom pencarian akan otomatis menampilkan item yang sesuai dengan kata kunci tersebut.