#筛选栏

筛选栏把搜索、分面筛选、当前条件、结果数和清除操作放在同一个稳定区域。它只维护控件状态并发出事件，结果查询仍由宿主应用负责。

npm install @a3s-lab/ui

<form class="filter-bar" role="search" aria-label="筛选项目">
  <div data-filter-controls>
    <div data-filter-primary>
      <input
        class="input"
        type="search"
        data-filter-search
        aria-label="搜索项目"
      />
      <div data-filter-group data-selection="single">
        <button
          type="button"
          data-filter-toggle
          data-filter-name="state"
          data-filter-value="active"
          aria-pressed="true"
        >
          活跃
        </button>
      </div>
    </div>
    <div data-filter-actions>
      <output data-filter-count>12 个项目</output
      ><button type="button" data-filter-clear>清除</button>
    </div>
  </div>
</form>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

<form class="filter-bar" role="search" aria-label="筛选项目">
  <div data-filter-controls>
    <div data-filter-primary>
      <input
        class="input"
        type="search"
        data-filter-search
        aria-label="搜索项目"
      />
      <div data-filter-group data-selection="single">
        <button
          type="button"
          data-filter-toggle
          data-filter-name="state"
          data-filter-value="active"
          aria-pressed="true"
        >
          活跃
        </button>
      </div>
    </div>
    <div data-filter-actions>
      <output data-filter-count>12 个项目</output
      ><button type="button" data-filter-clear>清除</button>
    </div>
  </div>
</form>

加载 filter-bar.js 后，控制器会同步单选或多选按钮、当前条件 Chip 和清除操作。

#参数

#JavaScript API

const filters = document.querySelector(".filter-bar");
filters.setFilters([{ name: "state", value: "active" }]);
filters.setSearch({ query: "release" });
console.log(filters.getState());
filters.resetFilters();
filters.addEventListener("a3s:filter-change", ({ detail }) =>
  updateQuery(detail),
);

getFilters() 与 getSearch() 返回查询快照。setFilters()、setSearch()、clear() 和 resetFilters() 同步分段条件、当前条件 Chip 与搜索值。原生 form.reset() 使用同一份初始快照，requestSubmit() 保留标准表单提交语义。refresh({ preserve, resetInitial }) 用于替换控件后重新绑定。

a3s:filter-before-change 可取消；拒绝后恢复上一份查询。a3s:filter-change 包含 previous、current、source、kind 以及兼容的 filters 字段。程序化修改搜索只产生一次原生 input 与一次自定义变化事件，用户输入复用已有原生事件，不重复派发。

#状态与变体

常用的 2–4 个分段条件可以直接显示；更多分面使用 Select、Combobox 或 Dropdown Menu。不要把所有字段都压成 Chip，也不要为只有一个筛选条件的页面增加复杂工具栏。

加载远程结果时保留用户输入和激活条件。无结果属于结果区域的 Empty 状态，不应替换筛选栏。

#无障碍

根元素使用具名搜索表单。切换按钮维护 aria-pressed，结果数变化使用礼貌播报。移除一个条件后把焦点保留在移除按钮附近；清除全部条件后不要自动聚焦结果区。