Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>

#myInput {
  box-sizing: border-box;
  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 {
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.hidden {
  display: none;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

</style>
</head>
<body>


<div class="dropdown">
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onfocusin="listIn()" onfocusout="listOut()" onkeyup="filterFunction()">
    <div class="hidden" onclick="test()">
         <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>
</div>

<script>

function test(e){
    e = e || window.event;
    var target = e.target || e.srcElement,
    text = target.textContent || target.innerText;
    document.getElementById("myInput").value = text;
}

function listIn() {
  $("#myDropdown > div").show();
}

function listOut() {
  $("#myDropdown > div").hide();
}

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++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

</body>
</html>