如何创建带下拉菜单的textbox？当输入类似搜索文本框的内容时，匹配的数据将显示在下拉列表中

<input type="text" id="myInput" onkeyup="filterFunction()" placeholder="输入搜索内容...">
<div id="myDropdown" class="dropdown-content">
  <a href="#">搜索结果1</a>
  <a href="#">搜索结果2</a>
  <a href="#">搜索结果3</a>
  <!-- 其他搜索结果 -->
</div>

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

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

function filterFunction() {
  var input, filter, dropdown, items, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  dropdown = document.getElementById("myDropdown");
  items = dropdown.getElementsByTagName("a");
  for (i = 0; i < items.length; i++) {
    a = items[i];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      a.style.display = "";
    } else {
      a.style.display = "none";
    }
  }
  dropdown.style.display = "block";
}