Btukfyl

I am trying to create a dropdown-menu with a filter/search function inside and I cant get it to keep open when i click in the " search field " at the moment it closes the whole list if i click inside.
Is there a good way to have it close when clicking outside the dropdown menu and keep it open when clicking inside the search field ?

This is what I got so far:

<ul>

<div class="navbar">

<div class="dropdown">

<button onclick="myFunction()" class="dropbtn">Varuhus</button>

<div class="dropdown">

<div id="myDropdown" class="dropdown-content">

<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">

  <a href="https://www.google.com" target="targetframe2">E-handel</a>

      <a href="https://www.google.com" target="targetframe2">Eskilstuna</a>

      <a href="https://www.google.com" target="targetframe2">Borås</a>

      <a href="https://www.google.com" target="targetframe2">Gävle</a>

  <a href="https://www.google.com" target="targetframe2">Göteborg Bäckebol</a>

  <a href="https://www.google.com" target="targetframe2">Göteborg Högsbo</a>

  <a href="https://www.google.com" target="targetframe2">Göteborg Torpavallen</a>

  <a href="https://www.google.com" target="targetframe2">Helsingborg</a>

  <a href="https://www.google.com" target="targetframe2">Jönköping</a>

  <a href="https://www.google.com" target="targetframe2">Kalmar</a>

  <a href="https://www.google.com" target="targetframe2">Kristianstad</a>

  <a href="https://www.google.com" target="targetframe2">Linköping</a>

  <a href="https://www.google.com" target="targetframe2">Luleå</a>

  <a href="https://www.google.com" target="targetframe2">Lund</a>

  <a href="https://www.google.com" target="targetframe2">Malmö Svågertorp</a>

  <a href="https://www.google.com" target="targetframe2">Norrköping</a>

  <a href="https://www.google.com" target="targetframe2">Skövde</a>

  <a href="https://www.google.com" target="targetframe2">Stockholm Barkarby</a>

  <a href="https://www.google.com" target="targetframe2">Stockholm Gallerian</a>

  <a href="https://www.google.com" target="targetframe2">Stockholm Heron City</a>

  <a href="https://www.google.com" target="targetframe2">Stockholm Länna</a>

  <a href="https://www.google.com" target="targetframe2">Stockholm Nacka</a>

  <a href="https://www.google.com" target="targetframe2">Stockholm Täby</a>

  <a href="https://www.google.com" target="targetframe2">Sundsvall</a>

  <a href="https://www.google.com" target="targetframe2">Umeå</a>

  <a href="https://www.google.com" target="targetframe2">Uppsala</a>

  <a href="https://www.google.com" target="targetframe2">Västerås</a>

  <a href="https://www.google.com" target="targetframe2">Växjö</a>

  <a href="https://www.google.com" target="targetframe2">Örebro</a>

   </div>

 </div> 

</div>

 <a href="#Aroma1">Back up top</a>

 <a href="#news">Nothing here yet</a>

</ul>





  <div>

  <iframe src="page1.html" name="targetframe2" width="1890" height="930"> allowTransparency="true" scrolling="no" frameborder="0" >

  </iframe>

  </div>





</iframe>









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

     }

   }

 }

// 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');

      }

    }

  }

}





</script>



</body>

</html>