如何使用javascript添加可搜索下拉列表

<input type="text" id="searchInput" placeholder="搜索...">
<select id="dropdownList">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
</select>

// 获取输入框和下拉列表元素
var searchInput = document.getElementById("searchInput");
var dropdownList = document.getElementById("dropdownList");

// 监听输入框的输入事件
searchInput.addEventListener("input", function() {
  var filter = searchInput.value.toUpperCase(); // 获取输入框的值并转换为大写

  // 遍历下拉列表的选项
  for (var i = 0; i < dropdownList.options.length; i++) {
    var option = dropdownList.options[i];
    var text = option.text.toUpperCase();

    // 如果选项的文本中包含搜索关键字，则显示该选项，否则隐藏该选项
    if (text.indexOf(filter) > -1) {
      option.style.display = "";
    } else {
      option.style.display = "none";
    }
  }
});