Created
July 15, 2020 16:23
-
-
Save alvalea/42b736fe26692d56df313779f29984ed to your computer and use it in GitHub Desktop.
css dropdown search bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
.dropbtn { | |
background-color: #4CAF50; | |
color: white; | |
padding: 16px; | |
font-size: 16px; | |
border: none; | |
cursor: pointer; | |
} | |
.dropbtn:hover, .dropbtn:focus { | |
background-color: #3e8e41; | |
} | |
#myInput { | |
box-sizing: border-box; | |
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: block; | |
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: none; | |
} | |
.dropdown a:hover {background-color: #ddd;} | |
.show {display: block;} | |
</style> | |
</head> | |
<body> | |
<h2>Search/Filter Dropdown</h2> | |
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p> | |
<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> | |
<script> | |
/* When the user clicks on the button, | |
toggle between hiding and showing the dropdown content */ | |
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++) { | |
txtValue = a[i].textContent || a[i].innerText; | |
if (txtValue.toUpperCase().indexOf(filter) > -1) { | |
a[i].style.display = "block"; | |
} else { | |
a[i].style.display = "none"; | |
} | |
} | |
if(filter == "") { | |
for (i = 0; i < a.length; i++) { | |
a[i].style.display = "none"; | |
} | |
} | |
} | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment