要在JavaScript和CSS中实现下拉菜单搜索功能，可以使用以下步骤

在HTML中创建一个下拉菜单，使用<select>标签，并填充选项使用<option>标签。例如

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
  <option value="5">选项5</option>
</select>
 

添加一个输入框，用于搜索选项，例如

<input type="text" id="myInput" οnkeyup="filterOptions()" placeholder="搜索...">
 

添加一个JavaScript函数filterOptions()，用于筛选选项并更新下拉菜单。这个函数应该在输入框中输入任何内容时都会调用。例如

function filterOptions() {
  var input, filter, select, options, i, option;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  select = document.getElementById("mySelect");
  options = select.getElementsByTagName("option");
  for (i = 0; i < options.length; i++) {
    option = options[i];
    if (option.innerHTML.toUpperCase().indexOf(filter) > -1) {
      option.style.display = "";
    } else {
      option.style.display = "none";
    }
  }
}
 

在CSS中添加样式，使下拉菜单和输入框看起来更好。例如

/* 隐藏下拉箭头 */
select::-ms-expand {
  display: none;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  padding: 8px;
  width: 200px;
}
input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  padding: 8px;
  width: 200px;
}
现在，当您输入内容时，下拉菜单将自动更新以仅显示与搜索匹配的选项