Topic: Dropdown Menu Search/Filter blocked

LAGIER priority asked 6 years ago


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:

Piotr Glejzer staff answered 6 years ago


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>

 


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags