CODEWITHSUNDEEP
javascripthtml
Mario
Mario

Reputation: 111

Close list of Dropdown Menu

I have this dropdown menu:

document.addEventListener("DOMContentLoaded", function(event) {
  allNameMuseums().forEach(function(item) { // ITERAZIONE
    document.getElementById("myDropdown").innerHTML += '<a onclick="updateData(this)">' + item + '</a>';
  })
});

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  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";
    }
  }
}
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Museo1</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
  </div>
</div>

I want that when I click an item in the list of dropdown menu, the list closes automatically.

Upvotes: 1

Views: 95

Answers (2)

Renato Lucas Chitolina
Renato Lucas Chitolina

Reputation: 146

What are you need is remove the "show" class from the element.

Example:

<!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 { 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>
</head>
<body>

<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu [...]</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" onclick="select()">Item1</a>
    <a href="#base" onclick="select()">Item2</a>
  </div>
</div>

<script>

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

function select() {
  //Your item selection logic here...
  myFunction();
}

</script>

</body>
</html>

Upvotes: 1

Aragorn
Aragorn

Reputation: 5289

Follow the example in W3C School here:

What you are missing is, closing the dropdown when the click is outside the button:

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Try yourself

And notice, this example doesn't have your search bar, so in this function, you'll have to check with the search bar as well to exclude it from closing the drop down.

Upvotes: 1

Related Questions