Cara Membuat Filter/ Search List
Ikuti kata hati pada menentukan alternatif karna tak seluruh alternatif lumayan dgn logika. Oke kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Filter/Search List.
Filter/Search yang dimaksud yaitu, membangun table list daftar yang ketika kita tuliskan di kolom search, kemudian akan otomatis keluar sesuai apa yang kita ketikkan tanpa mesti redirect dikala menekan tombol search nya. Oke seketika saja, berikut Cara Membangun Filter/Search List.
Pertama-tama-tama, siapkan file index.html nya.
Kemudian, isi di bagian <body> tag-tag HTML seperti berikut.
<h2>My Phonebook</h2>
<input type=text id=myInput onkeyup=myFunction() placeholder=Search for names.. title=Cara Membangun Filter/ Search List>
<ul id=myUL>
<li><a href=# class=header>A</a></li>
<li><a href=#>Adele</a></li>
<li><a href=#>Agnes</a></li>
<li><a href=# class=header>B</a></li>
<li><a href=#>Billy</a></li>
<li><a href=#>Bob</a></li>
<li><a href=# class=header>C</a></li>
<li><a href=#>Calvin</a></li>
<li><a href=#>Christina</a></li>
<li><a href=#>Cindy</a></li>
</ul>
Setelah itu, isi bagi CSS nya.
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a.header {
background-color: #e2e2e2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}Dan yang terakhir, isi bagi javascriptnya.
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById(myInput);
filter = input.value.toUpperCase();
ul = document.getElementById(myUL);
li = ul.getElementsByTagName(li);
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName(a)[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = ;
} else {
li[i].style.display = none;
}
}
}
</script>
Bagaimana teman-teman? Lumayan gampang bukan?
Demikianlah bagi panduan kali ini mengenai Cara Membangun Filter/Search List.
Semoga bermanfaat, terima kasih.
Sumber https://kursuswebsite.org
