html实现带搜索框的下拉框,搜索框值变化下拉框选项也变

可以使用JavaScript和HTML来实现带搜索框的下拉框，并且在搜索框的值发生变化时，下拉框的选项也会相应地变化。以下是一个简单的实现示例：

HTML代码：

<div class="dropdown">
  <input type="text" placeholder="Search" id="searchInput" onkeyup="filterOptions()">
  <button class="dropbtn" onclick="toggleDropdown()">▼</button>
  <div class="dropdown-content" id="dropdownContent">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
    <a href="#">Option 4</a>
    <a href="#">Option 5</a>
    <a href="#">Option 6</a>
  </div>
</div>

JavaScript代码：

// 获取下拉框和搜索框
var dropdownContent = document.getElementById("dropdownContent");
var searchInput = document.getElementById("searchInput");

// 显示/隐藏下拉框
function toggleDropdown() {
  dropdownContent.classList.toggle("show");
}

// 过滤下拉框选项
function filterOptions() {
  // 获取搜索框的值
  var filter = searchInput.value.toUpperCase();
  // 获取所有选项
  var options = dropdownContent.getElementsByTagName("a");
  
  // 遍历所有选项
  for (var i = 0; i < options.length; i++) {
    var option = options[i];
    // 如果选项的文本中包含搜索框的值，则显示该选项，否则隐藏该选项
    if (option.innerHTML.toUpperCase().indexOf(filter) > -1) {
      option.style.display = "";
    } else {
      option.style.display = "none";
    }
  }
}

CSS代码：

/* 下拉框样式 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 按钮样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 8px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 下拉框内容样式 */
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  border: 1px solid #ddd;
  max-height: 200px;
}

/* 选项样式 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 显示下拉框 */
.show {
  display: block;
}

这个示例实现了一个带搜索框的下拉框，当搜索框的值发生变化时，下拉框的选项也会相应地变化。你可以根据自己的需要修改样式和选项列表。