ts实现下拉框模糊搜索

以下是使用 TypeScript 实现下拉框模糊搜索的示例代码：

HTML 代码：

<label for="myInput">搜索:</label>
<input type="text" id="myInput" onkeyup="filterDropdown()" placeholder="输入搜索内容...">
<select id="mySelect">
  <option value="">请选择一个选项</option>
  <option value="1">苹果</option>
  <option value="2">香蕉</option>
  <option value="3">橙子</option>
  <option value="4">草莓</option>
  <option value="5">葡萄</option>
</select>

TypeScript 代码：

function filterDropdown() {
  const input = document.getElementById("myInput") as HTMLInputElement;
  const filter = input.value.toUpperCase();
  const select = document.getElementById("mySelect") as HTMLSelectElement;
  const options = select.options;

  for (let i = 0; i < options.length; i++) {
    const optionText = options[i].text.toUpperCase();
    if (optionText.indexOf(filter) > -1) {
      options[i].style.display = "";
    } else {
      options[i].style.display = "none";
    }
  }
}

在 TypeScript 代码中，我们首先使用 `document.getElementById` 方法获取输入框和下拉框的元素，并将它们强制转换为对应的 HTML 元素类型。接下来，我们使用 `for` 循环遍历下拉框中的每个选项，并将其文本转换为大写字母。如果选项的文本包含输入框中的值，则将其显示出来，否则将其隐藏起来。最后，我们将所有匹配的选项显示出来。

请注意，由于 TypeScript 是 JavaScript 的超集，因此您也可以使用 JavaScript 代码来实现相同的功能。