选择2:创建可搜索下拉列表

<input type="text" id="searchInput" onkeyup="searchFunction()" placeholder="搜索...">
<select id="dropdownList">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <!-- 其他选项 -->
</select>

function searchFunction() {
  var input, filter, dropdown, options, i;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  dropdown = document.getElementById("dropdownList");
  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";
    }
  }
}

/* 下拉列表样式 */
#dropdownList {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow-y: auto;
}

/* 选项样式 */
#dropdownList option {
  padding: 5px;
}

/* 搜索框样式 */
#searchInput {
  width: 200px;
  height: 30px;
  margin-top: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}