FamilyBook/assets/js/filter.js

/**
 * 输入即筛选（v24 用户 2026-10-03 第 2 条）
 *
 * 用户原话：「所有人员检索的地方，输入汉字或者首字母，自动筛选，而不需要按回车。」
 *
 * 这个模块只做**前端显隐**：数据已经全在页面上了，输入就立刻筛，不发请求。
 * 为什么不做成"输入 → AJAX 重查"：
 *   · 名册 / 挑人 / 选人弹窗都是几十条的小列表，整份渲染出来的成本可以忽略；
 *   · 一发请求就要处理"响应回来时输入框已经变了""光标跳到末尾"这些竞态，
 *     而这个功能的价值恰恰是"打字的时候列表在动" —— 有一帧延迟就不对了；
 *   · 没 JS 时页面上的「搜索」按钮/form 提交照旧能用（渐进增强，不是二选一）。
 *
 * 三种用法（都是声明式，靠 data-* 挂上去，不用改 JS）：
 *
 *   ① 列表行：<input data-filter="#roster"> … 行上带 data-search="姓名 称呼 邮箱 首字母"
 *      行被筛掉 = hidden 属性（⚠️ CSS 里必须给 [hidden] 写 display:none，
 *      作者样式里的 display:flex 会盖过浏览器默认的 [hidden] —— 项目里踩过两次）
 *
 *   ② 下拉选项：<input data-filter-select="#foo"> → 把不匹配的 <option> 藏起来。
 *      应用在"共享给谁 / 负责人 / 纪要人"这类原生下拉上（名册一长就难找）。
 *
 *   ③ 计数与空态：容器上带 data-filter-count="#id"（显示"命中 N 条"）、
 *      data-filter-empty="#id"（一条都没命中时露出来的提示）。
 *
 * 拼音首字母：服务端已经算好放进 data-initials（见 App\Pinyin::initials）。
 * 这里对 data-search 做"包含"，对 data-initials 做**子序列**（yyq / yy / y 都能中）。
 */
(function () {
  'use strict';

  /** q 是否是 s 的子序列（与 person_picker.js 同一判据） */
  function isSubSeq(q, s) {
    if (!q) { return true; }
    var i = 0;
    for (var j = 0; j < s.length && i < q.length; j++) {
      if (s.charAt(j) === q.charAt(i)) { i++; }
    }
    return i === q.length;
  }

  /** 一个元素能不能被 q 命中 */
  function hit(el, q) {
    if (!q) { return true; }
    var hay = (el.getAttribute('data-search') || '').toLowerCase();
    if (hay.indexOf(q) >= 0) { return true; }
    var ini = (el.getAttribute('data-initials') || '').toLowerCase();
    return ini ? isSubSeq(q, ini) : false;
  }

  function bindList(input) {
    var sel = input.getAttribute('data-filter');
    var box = sel ? document.querySelector(sel) : null;
    if (!box) { return; }
    // 行本身可能不是"直接子元素"，统一找带 data-search 的
    var items = box.querySelectorAll('[data-search]');
    var countEl = input.getAttribute('data-filter-count')
      ? document.querySelector(input.getAttribute('data-filter-count')) : null;
    var emptyEl = input.getAttribute('data-filter-empty')
      ? document.querySelector(input.getAttribute('data-filter-empty')) : null;

    function apply() {
      var q = (input.value || '').trim().toLowerCase();
      var shown = 0;
      Array.prototype.forEach.call(items, function (el) {
        var ok = hit(el, q);
        el.hidden = !ok;
        if (ok) { shown++; }
      });
      if (countEl) { countEl.textContent = q === '' ? '' : ('命中 ' + shown + ' 条'); }
      if (emptyEl) { emptyEl.hidden = !(q !== '' && shown === 0); }
      // 分组栏里一个人都不剩时，整栏也收起来（否则留一排空标题）
      Array.prototype.forEach.call(box.querySelectorAll('[data-filter-group]'), function (g) {
        var n = 0;
        Array.prototype.forEach.call(g.querySelectorAll('[data-search]'), function (el) {
          if (!el.hidden) { n++; }
        });
        g.hidden = n === 0;
      });
    }

    input.addEventListener('input', apply);
    // ⚠️ 回车**不要**提交表单：一提交页面就整页刷新、输入框失焦，
    //    而列表已经实时筛过了 —— 用户按回车只会看到"闪一下、什么都没变"。
    var form = input.form;
    if (form) {
      form.addEventListener('submit', function (e) {
        // 没有 JS 时的兜底是 form 提交；有 JS 时拦下来，避免无意义的整页刷新。
        if (input.getAttribute('data-filter-submit') !== '1') {
          e.preventDefault();
          apply();
        }
      });
    }
    apply();

    // 清除按钮：与「搜索」同形同尺寸（用户第 3 条），点了 = 清空 + 立刻重筛
    var clearSel = input.getAttribute('data-filter-clear');
    if (clearSel) {
      Array.prototype.forEach.call(document.querySelectorAll(clearSel), function (btn) {
        btn.addEventListener('click', function () {
          input.value = '';
          apply();
          input.focus();
        });
      });
    }
    return apply;
  }

  function bindSelect(input) {
    var box = document.querySelector(input.getAttribute('data-filter-select'));
    if (!box) { return; }
    var opts = Array.prototype.slice.call(box.options);
    // 每个 option 首次筛之前先备份（中文名 + 服务端给的 data-initials）
    Array.prototype.forEach.call(opts, function (o) {
      if (o.getAttribute('data-initials') === null) {
        o.setAttribute('data-initials', (o.getAttribute('data-initials-raw') || '').toLowerCase());
      }
      if (o.getAttribute('data-search') === null) {
        o.setAttribute('data-search', (o.textContent || '').trim().toLowerCase());
      }
    });
    input.addEventListener('input', function () {
      var q = (input.value || '').trim().toLowerCase();
      Array.prototype.forEach.call(opts, function (o) {
        if (o.value === '' || o.value === '0') { o.hidden = false; return; }  // 留「全部/不指定」
        var hay = o.getAttribute('data-search') || '';
        var ini = o.getAttribute('data-initials') || '';
        o.hidden = !(q === '' || hay.indexOf(q) >= 0 || (ini && isSubSeq(q, ini)));
      });
      // 当前选中的那项被筛掉了就把选择收回到「全部/不指定」，免得提交一个看不见的值
      if (box.selectedOptions.length && box.selectedOptions[0].hidden) {
        box.selectedIndex = 0;
      }
    });
  }

  function boot() {
    // 给页面一个"我到了"的标记：有些页面（名册的「清除」按钮）要据此决定
    // 是走"就地清空重筛"还是回落到跳转。没这个标记它们只能靠猜。
    window.__fbFilterLoaded = true;
    Array.prototype.forEach.call(document.querySelectorAll('[data-filter]'), bindList);
    Array.prototype.forEach.call(document.querySelectorAll('[data-filter-select]'), bindSelect);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
  } else {
    boot();
  }
})();