Suchfunktion vor Image map

<style>
 /* Container für Bild und Text */
.container {
  position: relative;
}

.container .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style für das Suchfeld */
#mySearch {
  width: 20%;
  font-size: 18px;
  padding: 11px;
  margin: 11px;
  border: 1px solid #ddd;
border-radius: 5px;
}

</style>

<div class="container">
  <img src="deinbild.jpg" alt="deinbild" style="width:100%;">
  <div class="content">
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Suche..." title="suche">
    
  </div>
</div> 

<script>
function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>