Membuat Filter atau Search Pada Menu Dropdown

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Filter atau Search Pada Menu Dropdown. Pembahasan kali ini hampir sama dengan pembahasan sebelumnya tentang cara membuat filter pada table. Dan kali ini saya akan terapkan pada menu dropdown.

Oke teman-teman langsung saja untuk bisa Membuat Filter atau Search Pada Menu Dropdown kita buat struktur htmlnya terlebih dahulu. Berikut script htmlnya.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Membuat Filter atau Search Pada Menu Dropdown</title>
</head>
<body>
<div class="container">
    <h2>Membuat Filter atau Search Pada Menu Dropdown</h2>
    <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
      <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
        <a href="#about">About</a>
        <a href="#base">Base</a>
        <a href="#blog">Blog</a>
        <a href="#contact">Contact</a>
        <a href="#custom">Custom</a>
        <a href="#support">Support</a>
        <a href="#tools">Tools</a>
      </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Membuat Filter atau Search Pada Menu Dropdown</title>

</head>

<body>

<h2>Membuat Filter atau Search Pada Menu Dropdown</h2>

<button onclick="myFunction()" class="dropbtn">Dropdown</button>

<a href="#about">About</a>

<a href="#contact">Contact</a>

<a href="#custom">Custom</a>

<a href="#support">Support</a>

<a href="#tools">Tools</a>

</div>

</body>

</html>

Jika sudah, kita bisa lanjutkan untuk membuat style cssnya dan berikut scriptnya.

<style>
    .container{
        margin: auto;
        width: 600px;
        background: salmon;
        padding: 20px;
    }
    .dropbtn {
        background-color: #090004;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #625b5e;
    }

    #myInput {
        border-box: box-sizing;
        background-image: url('searchicon.png');
        background-position: 14px 12px;
        background-repeat: no-repeat;
        font-size: 16px;
        padding: 14px 20px 12px 45px;
        border: none;
        border-bottom: 1px solid #ddd;
    }

    #myInput:focus {outline: 3px solid #ddd;}

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f6f6f6;
        min-width: 230px;
        overflow: auto;
        border: 1px solid #ddd;
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {background-color: #ddd}

    .show {display:block;}
</style>

<style>

.container{

margin: auto;

width: 600px;

background: salmon;

padding: 20px;

}

.dropbtn {

background-color: #090004;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

.dropbtn:hover, .dropbtn:focus {

background-color: #625b5e;

}

#myInput {

border-box: box-sizing;

background-image: url('searchicon.png');

background-position: 14px 12px;

background-repeat: no-repeat;

font-size: 16px;

padding: 14px 20px 12px 45px;

border: none;

border-bottom: 1px solid #ddd;

}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f6f6f6;

min-width: 230px;

overflow: auto;

border: 1px solid #ddd;

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown a:hover {background-color: #ddd}

.show {display:block;}

</style>

Oke teman-teman langkah terakhir kita buat javascriptnya untuk membuat fungsi filternya.

<script>
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}
</script>

function myFunction() {

document.getElementById("myDropdown").classList.toggle("show");

}

function filterFunction() {

var input, filter, ul, li, a, i;

input = document.getElementById("myInput");

filter = input.value.toUpperCase();

div = document.getElementById("myDropdown");

a = div.getElementsByTagName("a");

for (i = 0; i < a.length; i++) {

if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {

a[i].style.display = "";

} else {

a[i].style.display = "none";

}

</script>

Teman-teman jangan lupa simpan dengan format html dan jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Filter atau Search Pada Menu Dropdown. Semoga bisa bermanfaat dan selamat mencoba ya teman-teman.

Facebook DUMET School

Categories