如何在适配卡中创建可搜索下拉列表

<input type="text" id="searchInput" onkeyup="filterOptions()" placeholder="搜索...">
<div id="dropdownContainer">
  <select id="dropdown">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
  </select>
</div>

function filterOptions() {
  var input, filter, dropdown, options, i;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  dropdown = document.getElementById("dropdown");
  options = dropdown.getElementsByTagName("option");

  for (i = 0; i < options.length; i++) {
    if (options[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      options[i].style.display = "";
    } else {
      options[i].style.display = "none";
    }
  }
}

#dropdownContainer {
  position: relative;
  display: inline-block;
}

#dropdown {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#dropdown option {
  display: none;
  padding: 5px;
}

#dropdown option:first-child {
  display: block;
}