

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to search for items in a dropdown menu with CSS and JavaScript?
To search for items in a dropdown menu with CSS and JavaScript, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: rgb(76, 78, 175); color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #4f3e8e; } .searchField { box-sizing: border-box; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } .searchField:focus {outline: 3px solid #ddd;} .dropdown { position: relative; display: inline-block; } .dropdownList { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .dropdownList a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <h1>Search/filterText Dropdown Example</h1> <div class="dropdown"> <button class="dropbtn" onclick="showDropList()">Dropdown</button> <div id="myDropdown" class="dropdownList"> <input type="text" placeholder="Search.." class="searchField"> <a href="#">Cow</a> <a href="#">Cat</a> <a href="#">Dog</a> <a href="#">Giraffe</a> <a href="#">Lion</a> <a href="#">Leopard</a> <a href="#">Cheetah</a> </div> </div> <script> function showDropList(){ let dropDiv = document.querySelector('.dropdownList'); if(dropDiv.style.display==="block"){ dropDiv.style.display = ""; } else { dropDiv.style.display = "block"; } } document.querySelector('.searchField').addEventListener('keyup',filterDropdown); function filterDropdown() { var inputSearch, filterText, ul, li, links, i,div; inputSearch = document.querySelector(".searchField"); filterText = inputSearch.value.toUpperCase(); div = document.getElementById("myDropdown"); links = div.getElementsByTagName("a"); for (i = 0; i < links.length; i++) { txtValue = links[i].textContent || links[i].innerText; if (txtValue.toUpperCase().indexOf(filterText) > -1) { links[i].style.display = ""; } else { links[i].style.display = "none"; } } } </script> </body> </html>
Output
The above code will produce the following output −
On clicking the Dropdown button and entering text in search field −
- Related Questions & Answers
- How to create a clickable dropdown menu with CSS and JavaScript?
- How to create a hoverable dropdown menu with CSS?
- How to create a mega menu (full-width dropdown menu in a navigation bar) with HTML and CSS?
- How to create a top navigation menu for smartphones / tablets with CSS and JavaScript?
- Create Dropdown menu with Bootstrap
- How to create a vertical tab menu with CSS and JavaScript?
- How to create a curtain navigation menu with CSS and JavaScript?
- How to create a collapsible sidebar menu with CSS and JavaScript?
- How to create a collapsible sidepanel menu with CSS and JavaScript?
- How to create a search menu to filter links with JavaScript?
- How can I separate Menu Items in a Menu with Java?
- How to create a responsive bottom navigation menu with CSS and JavaScript?
- Tkinter dropdown Menu with keyboard shortcuts
- How to create an off-canvas menu with CSS and JavaScript?
- How to hide a navigation menu on scroll down with CSS and JavaScript?
Advertisements