多选搜索框点击输入框时如何清空内容并显示全部选项？

问题根源 #

你每次筛选时都从当前DOM的this.dom.items中获取选项，但筛选后不符合条件的项会被移除出DOM，导致this.dom.items只剩之前筛选后的结果。当清空输入框再点击输入框时，filterOptions只能基于这些剩余项筛选，自然无法显示全量列表。

修复步骤 #

1. 初始化时保存全量选项列表

在组件的初始化逻辑（比如构造函数或init方法）中，把所有原始选项保存到实例变量，避免依赖DOM动态变化：

// 初始化阶段执行，比如构造函数里
this.allOptions = Array.from(this.dom.items);

2. 修改filterOptions函数，基于全量列表筛选

将原本从DOM取选项的逻辑替换为使用保存的全量列表，同时区分搜索高亮和选中状态的样式类（避免冲突）：

filterOptions() {
    this.dom.select.classList.add('open');
    this.dom.select.classList.remove('closed');

    // 改用初始化时保存的全量选项列表
    const items = this.allOptions;
    const typedValue = this.dom.input.value.toLowerCase().trim();

    this.filteredOptions = items.filter(val => val.innerText.toLowerCase().indexOf(typedValue) > -1);

    if (this.filteredOptions.length) {
      this.dom.selectOptions.innerHTML = '';

      for (let i = 0; i < this.filteredOptions.length; i += 1) {
        // 用highlight类标记搜索匹配项，和选中状态的active类区分
        if (typedValue !== this.filteredOptions[i].innerText.trim().toLowerCase()) {
          this.filteredOptions[i].classList.remove('highlight');
        } else {
          this.filteredOptions[i].classList.add('highlight');
        }
        // 保留选中项的active类，不要覆盖
        this.dom.selectOptions.appendChild(this.filteredOptions[i]);
      }
    } else {
      this.dom.selectOptions.innerHTML = '<div class="no_results">No results found</div>';
    }
}

3. 选中项后立即触发全量筛选

在multiSelect函数清空输入框后，手动调用filterOptions，确保下拉框立即显示全量选项：

multiSelect(target) {
    const optionsArr = this.selectedOptions;
    const li = target.closest('.item');
    const input = li.querySelector('input');
    const itemValue = input.value;
    const typedValue = this.dom.input.value.toLowerCase().trim();

    if (target.tagName !== 'INPUT') {
      input.checked = !input.checked;
    }

    li.classList.toggle('active', input.checked);

    if (input.checked) {
      this.dom.input.value = '';
      // 清空输入框后立即调用筛选，展示全量选项
      this.filterOptions();
    } 

    if (optionsArr.indexOf(itemValue) === -1) {
      optionsArr.push(itemValue);
    } else {
      optionsArr.splice(optionsArr.indexOf(itemValue), 1);
    }
}

4. 绑定输入框点击事件（如果未绑定）

确保点击输入框时触发筛选逻辑，此时输入框为空，会自动显示全量选项：

// 初始化时绑定点击事件
this.dom.input.addEventListener('click', () => this.filterOptions());

效果说明 #

修改后，无论之前进行过多少次筛选操作，只要输入框为空（包括选中项后清空），点击输入框都会展示所有原始选项，不会受之前筛选的DOM变化影响。

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