<h2>搜索/过滤</h2>

<p>点击按钮显示下拉菜单，输入框可以搜索过滤内容。</p>

​

<div class="dropdown">

<button onclick="myFunction()" class="dropbtn">下拉菜单</button>

  <div id="myDropdown" class="dropdown-content">

    <input type="text" placeholder="搜索.." 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>

/* 点击按钮可以显示或隐藏下拉菜单 */

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";

        }

    }

}

.dropbtn {

    background-color: #4CAF50;

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}

​

.dropbtn:hover, .dropbtn:focus {

    background-color: #3e8e41;

}

#myInput {

    border-box: box-sizing;

    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAACYktHRAD/h4/MvwAAAAl2cEFnAAABKgAAASkAUBZlMQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMy0wNC0xMFQwNjo1OTowNy0wNzowMI5BiVEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMDQtMTBUMDY6NTk6MDctMDc6MDD/HDHtAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAABF0RVh0VGl0bGUAc2VhcmNoLWljb27Cg+x9AAACKklEQVQ4T6WUSavqQBCFK+2sII7gShFXLpUsBBHFf+1KcAQFwaWiolsnnBDn++4p0iHRqPDuByFJd/Wp6qrqVn5+IQP3+52m0ymtVis6Ho885na7KRgMUiKR4O9vmEQHgwGNx2NyOp0khCBFUXgcJo/Hg67XK8ViMcpkMjz+Dl200+nQZrMhh8PBE4gYQgDidrudvzEOm2KxyP9WsCginM1mHKEUS6VSFA6HOWI4G41GPAfx2+1GgUCAVFXVZMwovwY/lUqFPB4PiyFn+XxemzbT6/VovV6z8Ol0olwux+LPCBQFEQKIvhME2WyWbWGHFCD/VghUGVvE1rDlb6TTabbFmuVyqY2aEWgbFALeI5GINvyeUCjEtlgju+IZoRWfkS30CURoxFJUNjMEt9stf38CNjJKIFvNiMBJgTebzcZt843hcMhCELWqPBDxeJwulwtvC/3X7/e1qVfgFD0rC5tMJrUZM8Lr9VI0GmVBRDCfz6nZbHI/Sna7HXW7XZpMJtxSiBIP1lmhH9NqtaqfGKQDTmQREBnSgwfmMqfYYblc1o+2xHShtNttLgSiee4EmMEp3hDBPJzikimVSuRyuTTLJ1GwWCz4pCB3UhiL/X4/Hw50C5zjLSM+n898weCogxdRIzAGxigAdtNqtV6EC4UC+Xy+z6Kf2O/31Gg0TMK4ZBDxf4uCw+FA9XpdF0aaUOg/iQLcHbVaTb/p0Cl/FgXIJ/oYnaCqKv0DC6dltH6Ks84AAAAASUVORK5CYII=");

    background-position: 14px 12px;

    background-repeat: no-repeat;

    font-size: 16px;

    padding: 14px 20px 12px 45px;

    border: none;

}

​

.dropdown {

    position: relative;

    display: inline-block;

}

​

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f6f6f6;

    min-width: 230px;

    overflow: auto;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    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;}