js 下拉框搜索

<input type="text" id="searchInput" placeholder="搜索...">
<select id="dropdown" size="5">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="cherry">樱桃</option>
  <option value="date">枣</option>
  <option value="elderberry">接骨木莓</option>
  <!-- 更多选项... -->
</select>

const searchInput = document.getElementById('searchInput');
const dropdown = document.getElementById('dropdown');
const options = dropdown.options;

searchInput.addEventListener('input', function() {
  const filter = this.value.toLowerCase();
  for (let i = 0; i < options.length; i++) {
    const optionText = options[i].text.toLowerCase();
    if (optionText.includes(filter)) {
      options[i].style.display = '';
    } else {
      options[i].style.display = 'none';
    }
  }
});