laoyang
df657e5e5a
地址联想:下拉候选补详细地址,同名地点可区分 laoyang/FamilyBook#32
用户 2026-10-30:「输入一个简单地址、下拉显示详细地址时,不能只把地点告诉我,
一定要把详细地址也放在后面。因为同一个地址可能有好几个,我根本不知道应该选哪一个。」
原来用的是 AMap.AutoComplete 的内置下拉 —— 它只画 name,同名地点
(多个「星巴克」、同一商场的不同入口)长得一模一样,无法判断该选哪个。
⇒ 改成「高德只当查询器、下拉自己画」:
· 构造时不传 input,高德不再塞自己的面板
· 输入防抖 260ms → ac.search(kw) → 自己渲染 result.tips
· 每行 = 地名(14px 深色)+ 省市区/详细地址(12px 灰字)
选中后的既有行为原样保留(只是入口从高德的 select 事件换成自建候选的点击):
data-addr-fill 回填、data-addr-detail 写门牌、框下 .fb-addr-hint 提示、
fb-addr-picked 事件。
几处刻意的取舍:
· 面板挂 body + position:fixed,不挂输入框父节点 —— 否则会被 .mv-row
的两列网格挤掉、或被子表单弹框的 overflow:hidden 裁掉
· placePanel 量不到尺寸(0x0)时**只跳过定位、不收起**。原来收起了,
导致候选查到却一显示就消失(实测踩到)
· 少于 2 字不查,并收起面板,避免残留旧候选被误点
· 候选行用 textContent 逐个填,不拼 HTML(地点名含 < & 会破版/注入)
验证:jsdom 27 项(含 from/to 不串、SDK 未就绪降级、自愈)+
真实浏览器 54 项(桌面/手机视口 × 表单/弹框/贴底部三种布局)全通过;
反向验证 3 个坏变体(不渲染副标题/副标题为空/不挂 body)判据全部正确转红。
2026-10-30 07:37:55 +08:00
..
2026-10-22 22:05:17 +08:00
2026-10-30 07:37:55 +08:00
2026-10-28 18:29:59 +08:00
2026-10-25 14:52:43 +08:00
2026-10-25 14:52:43 +08:00
2026-10-03 19:27:14 +08:00
2026-10-08 14:46:16 +08:00
2026-10-18 11:22:34 +08:00
2026-10-15 23:04:25 +08:00
2026-10-09 07:25:08 +08:00
2026-10-12 00:24:20 +08:00
2026-10-27 01:00:12 +08:00
2026-10-22 12:40:14 +08:00
2026-10-28 18:29:59 +08:00
2026-10-19 17:27:37 +08:00