我帮你排查出几个关键问题，这直接导致了搜索框在下拉列表内无法正常工作：

问题根源 #

1. HTML结构不匹配JS/CSS逻辑
   你把搜索输入框放在了options-container内部，但JS代码是通过.search-box input来获取元素的，而你的.search-box容器是空的——这意味着JS根本找不到要绑定事件的搜索框，自然搜不了。同时，CSS里的样式规则依赖options-container和search-box的兄弟关系，原结构里search-box在selected后面，和options-container不是直接兄弟，导致激活下拉时搜索框的显示样式也不会生效。

2. 下拉容器的滚动体验问题
   就算搜索框能被找到，原结构里它在options-container内，当列表滚动时，搜索框会跟着滚走，用户体验也很差。

修复方案 #

我会调整结构、修正CSS和JS逻辑，让搜索框固定在下拉列表顶部，同时保持功能正常：

1. 修正HTML结构

把搜索输入框移到.search-box容器中，并调整select-box内部元素顺序，让搜索框在下拉列表前面：

<div class="select-box">
  <div class="selected"> Please choose a category </div>
  <div class="search-box">
    <input type="text" placeholder="Search..." />
  </div>
  <div class="options-container">
    <div class="option">
      <input type="radio" class="radio" id="automobiles" name="category" />
      <label for="automobiles">1</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="film" name="category" />
      <label for="film">2</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="science" name="category" />
      <label for="science">3</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="art" name="category" />
      <label for="art">4</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="music" name="category" />
      <label for="music">5</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="travel" name="category" />
      <label for="travel">6</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="sports" name="category" />
      <label for="sports">7</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="news" name="category" />
      <label for="news">8</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="tutorials" name="category" />
      <label for="tutorials">9</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="tutorials-10" name="category" />
      <label for="tutorials-10">10</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="tutorials-11" name="category" />
      <label for="tutorials-11">11</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="tutorials-12" name="category" />
      <label for="tutorials-12">12</label>
    </div>
  </div>
</div>

注意：我给重复的radio id加了后缀，避免DOM元素id冲突

2. 调整CSS样式

修改下拉状态的控制逻辑，给select-box添加active类来统一控制搜索框和列表的显示，同时让搜索框固定在顶部：

.login-page {
  width: 550px;
  padding: 5% 0 0;
  margin: auto;
}
.login-page .form .login{
  margin-top: -30px;
  margin-bottom: 5px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 500px;
  margin: 0 auto 100px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 5px;
}
.form input {
  font-family: "Arial";
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 1px solid;
  margin: 0 0 20px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
}
.form input:focus{
  outline: none;
  border:2px solid #08ac4b;
  box-shadow: 0 0 1px #08ac4b;
}
.form button {
  font-family: "Arial";
  text-transform: none;
  outline: 0;
  background-color: #08ac4b;
  width: 100%;
  border: 1px solid;
  padding: 15px;
  color: #ffffff;
  font-size: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 0 20px;
}
.container {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}
body {
  background-color: #ffffff;
  font-family: "Arial";
}
.select-box {
  display: flex;
  flex-direction: column;
}
.select-box .options-container {
  background: #ffffff;
  color: #000000;
  max-height: 0px;
  transition: all 0.4s;
  border-radius: 5px;
  overflow: hidden;
  order: 2;
  margin-top: 8px;
}
.selected {
  box-sizing: border-box;
  font-family: "Arial";
  outline: none;
  border:1px solid;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 8px;
  color: #000000;
  position: relative;
  order: 0;
  width: 100%;
  text-align: left;
  padding: 15px;
  cursor: pointer;
}
.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-repeat: no-repeat;
  transition: all 0.4s;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}
/* 修改为通过select-box的active类控制状态 */
.select-box.active .options-container {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  font-family: "Arial";
  width: 100%;
  text-align: start;
}
.select-box .option {
  padding: 15px;
  cursor: pointer;
}
.select-box .option:hover {
  background: #edf7f1;
}
.select-box label {
  cursor: pointer;
}
.select-box .option .radio {
  display: none;
}
/* 搜索框样式调整 */
.search-box {
  order: 1;
}
.search-box input {
  font-family: "Arial";
  outline: 0;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
  width: 100%;
  border:1px solid;
  padding:15px;
}
.search-box input:focus {
  outline: none;
  border:2px solid #08ac4b;
  box-shadow: 0 0 1px #08ac4b;
}
.select-box.active .search-box input {
  opacity: 1;
  pointer-events: auto;
}

3. 修正JS逻辑

修改点击事件，给select-box添加/移除active类，同时优化搜索判断逻辑：

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");
const optionsList = document.querySelectorAll(".option");
const selectBox = document.querySelector(".select-box");

selected.addEventListener("click", () => {
  selectBox.classList.toggle("active");
  searchBox.value = "";
  filterList("");
  if (selectBox.classList.contains("active")) {
    searchBox.focus();
  }
});

optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    selectBox.classList.remove("active");
  });
});

searchBox.addEventListener("keyup", function(e) {
  filterList(e.target.value);
});

const filterList = searchTerm => {
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.querySelector("label").innerText.toLowerCase();
    // 用includes替代indexOf，逻辑更直观
    option.style.display = label.includes(searchTerm) ? "block" : "none";
  });
};

修复后的效果 #

现在搜索框会固定在下拉列表顶部，点击选中项展开下拉时，搜索框自动显示并获得焦点，输入内容能实时过滤列表项，选择后下拉收起，完全符合预期功能。

内容的提问来源于stack exchange，提问作者Co D