/** * 全局人员选择器(v24 用户第 11 条) * * 一个页面里可能有多个 .pp(观影同行人 / 旅程同行人 / 资源归属 / 共享给谁 …), * 所以这里按容器逐个初始化,状态全挂在容器自己身上,互不影响。 * * 三件事: * ① 汉字 → 拼音首字母(Intl 拼音排序 + 23 个锚字二分,零依赖) * ② 搜索:名字 / 显示名 / 首字母 三者任一命中就留下 * ③ chips 与弹窗里的勾选状态双向同步 */ (function () { 'use strict'; /* ------------------------------------------------------------------ * 汉字 → 拼音首字母 * * 做法:a..z 各挑一个「锚字」(没有 i / u / v 开头的常用字,所以是 23 个), * 用拼音 collation 二分定位某个汉字落在哪一段 —— 落在「垃」之后、「妈」之前 * 就是 l。整套零依赖,不需要塞一张几万字的拼音表进来。 * * ⚠️ 浏览器不支持拼音排序时返回 null:此时只按名字搜,不硬出错误结果。 * ---------------------------------------------------------------- */ var initialsOf = (function () { var anchors = '阿八擦搭娥发嘎哈击喀垃妈拿哦啪期然撒塌挖昔压匝'; var letters = 'abcdefghjklmnopqrstwxyz'; var coll; try { coll = new Intl.Collator('zh-Hans-CN-u-co-pinyin'); } catch (e) { return null; } // 排序没真正生效时 compare 会退化成按码点/笔画,这里直接认不出来 → 放弃拼音 if (!coll || coll.compare('阿', '匝') >= 0) { return null; } return function (s) { var out = ''; for (var i = 0; i < s.length; i++) { var ch = s.charAt(i); if (/[a-zA-Z]/.test(ch)) { out += ch.toUpperCase(); continue; } if (ch.charCodeAt(0) < 0x2E80) { continue; } // 非 CJK:不产字母 var lo = 0, hi = anchors.length - 1, best = -1; while (lo <= hi) { var mid = (lo + hi) >> 1; if (coll.compare(ch, anchors.charAt(mid)) >= 0) { best = mid; lo = mid + 1; } else { hi = mid - 1; } } if (best >= 0) { out += letters.charAt(best); } } return out; }; })(); /** * q 是否是 s 的**子序列**。 * 为什么不用 indexOf:「杨永全」的首字母是 yyq,用户很自然地会打 yq —— * 连续子串匹配不到,子序列能。选人这种小列表宁可放宽一点,也别让人以为坏了。 */ 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; } function init(root) { var id = root.getAttribute('data-pp') || ''; var isMulti = root.getAttribute('data-pp-mode') !== 'single'; var modal = root.querySelector('.pp-modal'); var openBtn = root.querySelector('.pp-open'); var closeBtn = root.querySelector('.pp-close'); var search = root.querySelector('.pp-search'); var list = root.querySelector('.pp-list'); var chips = root.querySelector('.pp-chips'); var emptyTip = root.querySelector('.pp-empty'); if (!modal || !list || !chips) { return; } // 预计算每个人的首字母串,挂在 data-initials 上(列表再长也只是算一次) // ⚠️⚠️ **每个字段单独算,用空格分隔,绝不拼成一串**。 // "姓名 + 称呼" 拼起来会造出**跨字段的巧合命中**: // 用户 2026-10-03 实测「输 yy 把岳父搜出来」——洪勇的称呼是"岳父", // `hy` + `yf` = `hyyf`,子序列 `yy` 正好跨过边界命中; // 单独看 `hy` 与 `yf` 都不含 `yy`。逐字段判才是对的。 // 服务端(App\Pinyin::matches)本来就是逐字段判的,两边口径保持一致。 /** * 给一批 .pp-item 算 data-initials 与首字母徽标。 * ⚠️ 抽成函数是因为**动态建出来的清单也要走同一套**(v24 第 11 批 #7 续: * 候选人清单改成打开弹框时才建,建完必须补算首字母, * 否则"输入 yyq 找杨永全"这条既有功能会静默失效)。 */ function decorateItems(scope) { Array.prototype.forEach.call((scope || list).querySelectorAll('.pp-item'), function (el) { var parts = []; var n1 = el.getAttribute('data-name') || ''; var n2 = el.getAttribute('data-shown') || ''; [n1, n2].forEach(function (s) { if (!s) { return; } var ini = initialsOf ? initialsOf(s) : ''; if (ini && parts.indexOf(ini.toLowerCase()) < 0) { parts.push(ini.toLowerCase()); } }); el.setAttribute('data-initials', parts.join(' ')); // 徽标只显示**姓名的**首字母(称呼那串太杂,显示出来反而更乱) var badge = el.querySelector('.pp-initials'); var first = initialsOf ? initialsOf(n1) : ''; if (badge && first) { badge.textContent = first; badge.hidden = false; } }); } decorateItems(); function syncChips() { chips.innerHTML = ''; var any = false; Array.prototype.forEach.call(list.querySelectorAll('.pp-item input:checked'), function (box) { if (box.value === '0') { return; } // 「不选」不进 chips var item = box.closest('.pp-item'); if (!item) { return; } any = true; // ⚠️ 必须点名取 .pp-name:.pp-item 里第一个 span 是隐藏的首字母占位, // 早年靠「取第一个 span 当名字」碰巧成立,加了首字母徽标后 chip 就没名字了。 var nameEl = item.querySelector('.pp-name'); var av = item.querySelector('.pp-av'); var chip = document.createElement('span'); chip.className = 'pp-chip'; chip.setAttribute('data-id', box.value); if (av) { var im = document.createElement('img'); im.src = av.getAttribute('src'); // 服务端已 e() 过,这里原样搬 im.alt = ''; chip.appendChild(im); } var nm = document.createElement('span'); nm.className = 'pp-name'; nm.textContent = nameEl ? nameEl.textContent : box.value; chip.appendChild(nm); if (isMulti) { var x = document.createElement('button'); x.type = 'button'; x.className = 'pp-x'; x.textContent = '×'; x.title = '移除'; x.setAttribute('data-id', box.value); chip.appendChild(x); } chips.appendChild(chip); }); // ⚠️ 多选且一个都没选时**不要**塞占位 chip:.pp-chip 自己写了 display:inline-flex, // 再给它 hidden 也藏不掉(作者样式压过 UA 的 [hidden]),会留下一个空胶囊。 if (!any && !isMulti) { var ph = document.createElement('span'); ph.className = 'pp-chip pp-chip-empty'; ph.textContent = '未选择'; chips.appendChild(ph); } } function applyFilter() { var q = (search.value || '').trim().toLowerCase(); var shown = 0; Array.prototype.forEach.call(list.querySelectorAll('.pp-item'), function (el) { // ⚠️ 首字母按**空格分隔的多段**逐段独立判 —— 见上面写 data-initials 时的说明 // (把"姓名+称呼"拼成一串会让 `yy` 跨字段命中"洪勇/岳父")。 var inis = (el.getAttribute('data-initials') || '').split(/\s+/); var iniHit = false; for (var i = 0; i < inis.length; i++) { if (inis[i] && isSubSeq(q, inis[i])) { iniHit = true; break; } } var hit = !q || (el.getAttribute('data-name') || '').toLowerCase().indexOf(q) >= 0 || (el.getAttribute('data-shown') || '').toLowerCase().indexOf(q) >= 0 || iniHit; el.hidden = !hit; if (hit) { shown++; } }); if (emptyTip) { emptyTip.hidden = shown > 0; } } /** * 按需把候选人清单建出来(v24 第 11 批 #7 续)。 * * 为什么不在服务端首屏渲染:线上真实数据下每页 1~3 个选人组件 × 1184 人 * = 几千个