Topic: Dropdown Menu Search/Filter blocked
Hello,I need the Dropdown Menu Search / Filter function for my site for a set of redirects to other pages of the same folder, because the list is long to roll out and putting a Search / Filter makes it easier to search.So I encounter a problem with the function of the Dropdown Menu plus Search / Filter set that does not work, the list does not run.I first tested Dropdown only the list goes normally.To make sure where the problem comes from I deleted all the JavaScripts from my page, but it still does not work.So I left a blank page and I tested the code that gives w3schools.comhttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter, it works fine.So I integrated into a page of MDB Free, without adding anything other than the code given by w3schools.com, it does not work.After testing several solutions I removed the "mdb.min.css" and there Dropdown Menu Search / Filter, works perfectly.It seems that there is in mdb.min.css a piece of code that blocks the progress of the list, and perhaps also the filter function but there, I could not test.You would be of great help if you could help me solve my problem.With thanksAlain Lagier<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1">< !-- STYLE CSS --><style>.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('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 CSS --></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> < !-- HTML --><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>< !-- /HTML -->< !-- SCRIPT --><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++) {if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {a[i].style.display = "";} else {a[i].style.display = "none";}}}</script>< !-- /SCRIPT --></body></html>Here is the code given on the w3scholl.com page:
Add comment
Hi,
we are very sorry but we don't have what you exactly want in our documentation. So I created something what works with our MDB PRO , you can check. We will think more about your idea!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--Dropdown primary-->
<div class="dropdown">
<!--Trigger-->
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown primary</button>
<!--Menu-->
<div class="dropdown-menu dropdown-primary" id="dropDiv">
<input id="someInput" class="form-control" type="text" placeholder="Search" aria-label="Search" onkeyup='filterFunction()'>
<a class="dropdown-item" href="#1">Action</a>
<a class="dropdown-item" href="#2">Another action</a>
<a class="dropdown-item" href="#3">Something else here</a>
<a class="dropdown-item" href="#4">Something else here</a>
</div>
</div>
<!--/Dropdown primary-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("someInput");
filter = input.value.toUpperCase();
div = document.getElementById("dropDiv");
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>
</body>
</html>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes