js实现select组件的选择输入过滤代码

下面我将详细讲解如何实现JS选择输入过滤组件的代码。

1. 需求分析

在编写组件代码之前，我们需要先分析需求，明确自己要实现一个怎样的组件。本次需求分析结果如下：

• 实现一个类似于<select>标签的输入组件
• 该组件支持输入过滤功能，可以根据用户所输入的值进行过滤
• 当用户输入完整的合法选项时，下拉框中会显示匹配该选项的选项值。

2. HTML 结构

组件的 HTML 结构我们以一个简单的下拉框为例进行演示。代码如下：

<div class="select-wrapper">
  <input type="text" class="select-input">
  <ul class="select-options">
    <li data-value="1">Apple</li>
    <li data-value="2">Banana</li>
    <li data-value="3">Cherry</li>
    <li data-value="4">Durian</li>
    <li data-value="5">Elderberry</li>
  </ul>
</div>

其中，<input> 标签用于表示用户输入框；<ul> 标签用于表示下拉框中的所有选项。在每个选项中，我们可以使用 data-value 属性存储该选项的值。

3. CSS 样式

这里给出一个 CSS 样式的例子，实现简单的样式布局。具体样式可以根据实际需要进行修改。

.select-wrapper {
  position: relative;
  width: 200px;
}

.select-input {
  width: 100%;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ddd;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.select-options li {
  padding: 4px 8px;
  cursor: pointer;
}

.select-options li:hover {
  background-color: #eee;
}

• .select-wrapper ：外部容器，用于包裹整个 select 组件。
• .select-input ：输入框，用于接收用户的输入。
• .select-options ：选项容器，包含所有选项。
• .select-options li ：选项列表，所有可选项都应包含在其中。

4. JS 代码

4.1 事件绑定

我们需要在 input 元素中监听 input 事件，当用户输入内容时，我们可以根据用户输入的内容和选项值进行过滤，并更新下拉框中的选项。最后，我们在搜索框种监听 blur 事件，如果当前值和下拉框中任何一个选项值相同时, 将其设置为当选值。

const selectInput = document.querySelector(".select-input");
const selectOptions = document.querySelectorAll(".select-options li");

// 输入框输入时过滤选项
selectInput.addEventListener("input", function () {
  const keyword = this.value.trim().toLowerCase();
  selectOptions.forEach(function (option) {
    const text = option.innerText.toLowerCase();
    const value = option.dataset.value;
    if (text.indexOf(keyword) === -1) {
      option.setAttribute("hidden", "");
    } else {
      option.removeAttribute("hidden");
      if (text === keyword) {
        selectInput.value = option.innerText;
      }
    }
  });
});

// 键盘上下键，选中对应的选项
selectInput.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {
      const selectedOption = document.querySelector(".select-options li:not([hidden])");
      if (selectedOption) {
        selectInput.value = selectedOption.innerText;
      }
    } else if (e.keyCode === 38 || e.keyCode === 40) {
      const currentOption = document.querySelector(".select-options li:hover");
      let index = 0;
      selectOptions.forEach(function (option, i) {
        if (option === currentOption) {
          index = i;
        }
      });
      if (e.keyCode === 38) {
        index--;
      } else if (e.keyCode === 40) {
        index++;
      }
      index = (index + selectOptions.length) % selectOptions.length;
      selectOptions[index].scrollIntoView();
    }
});

// 点击页面其他位置 隐藏下拉框
document.addEventListener("click", function (e) {
  if (!selectInput.contains(e.target)) {
    selectOptions.forEach(function (option) {
      option.setAttribute("hidden", "");
    });
  }
});

// 当确定选项时，隐藏选项
selectInput.addEventListener("blur", function () {
  const selectedOption = document.querySelector(
    '.select-options li[data-value="' + this.value + '"]'
  );
  if (selectedOption) {
    selectInput.value = selectedOption.innerText;
  }
});

4.2 示例演示

我们针对上述需求为例，提供如下两个简单的示例：

示例一：选择一种水果

<div class="select-wrapper">
  <input type="text" class="select-input">
  <ul class="select-options">
    <li data-value="1">Apple</li>
    <li data-value="2">Banana</li>
    <li data-value="3">Cherry</li>
    <li data-value="4">Durian</li>
    <li data-value="5">Elderberry</li>
  </ul>
</div>

示例二：选择地区

<div class="select-wrapper">
  <input type="text" class="select-input">
  <ul class="select-options">
    <li data-value="1">Beijing</li>
    <li data-value="2">Shanghai</li>
    <li data-value="3">Guangzhou</li>
    <li data-value="4">Shenzhen</li>
    <li data-value="5">Chengdu</li>
  </ul>
</div>

针对此两个示例提供的代码，用户可以自由地进行修改，根据自己的实际需求定制化选择输入过滤组件。