本文介绍如何通过 html 文本输入框获取房屋编号，利用 javascript 动态查找并高亮对应 svg 元素，替代冗余的按钮列表，提升急救人员在无序编号社区中快速定位房屋的效率。
本文介绍如何通过 html 文本输入框获取房屋编号，利用 javascript 动态查找并高亮对应 svg 元素，替代冗余的按钮列表，提升急救人员在无序编号社区中快速定位房屋的效率。
在实际应急响应场景中，面对不规则、无序排列的房屋编号（如 “1a”“22b”“32”），逐个点击按钮查找目标位置既低效又易出错。理想方案是：用户输入任意房屋编号（支持模糊匹配），系统自动高亮所有匹配的 SVG 元素。这无需为每个房屋编写独立函数，也不依赖固定 ID 格式，而是通过现代 Web 技术实现可扩展、易维护的交互逻辑。
核心思路是：让每个房屋 SVG 元素主动监听输入框变化，并根据当前输入值自主判断是否匹配自身编号。相比传统 getElementById() 需预先知道 ID 并手动调用，该方式更灵活、更健壮——尤其适合编号含字母、连字符或前导零（如 "01"）等非常规格式。
以下是一个完整、可直接运行的解决方案，基于原生 Web Components 实现：
<svg-house-map>
<input type="text" placeholder="请输入房屋编号（支持模糊匹配）"><br>
<svg viewBox="0 0 0 0" style="background:#f9f9f9; border:1px solid #ddd; width:100%; max-width:600px;">
<style>
.selected { fill: #28a745 !important; }
circle { fill: #e0e0e0; stroke: #333; stroke-width: 1.2; transition: fill 0.2s ease; }
text { font-family: Arial, sans-serif; font-size: 14px; dominant-baseline: middle; text-anchor: middle; }
</style>
<!-- 房屋数据：格式为 "编号,CX,CY,RADIUS" -->
<house>01,380,400,40</house>
<house>02,380,60,40</house>
<house>03,80,240,40</house>
<house>04,430,210,40</house>
<house>05,110,60,40</house>
<house>06,230,130,40</house>
<house>07,130,370,40</house>
<house>08,280,280,40</house>
</svg>
</svg-house-map>
<script>
customElements.define("svg-house-map", class extends HTMLElement {
connectedCallback() {
// 确保 SVG 内容已解析后再处理
setTimeout(() => {
const svg = this.querySelector("svg");
const input = this.querySelector("input");
const houses = Array.from(svg.querySelectorAll("house"));
// 动态计算 viewBox 范围（含安全边距）
const vbx = [], vby = [];
houses.forEach(house => {
const [nr, cx, cy, r = 40] = house.textContent.split(",").map(s => s.trim());
const radius = Number(r);
// 扩展 viewBox 边界（加半径+10px 边距）
vbx.push(Number(cx) + radius + 10);
vby.push(Number(cy) + radius + 10);
// 构建 SVG 元素：圆圈 + 居中文本
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", cx);
circle.setAttribute("cy", cy);
circle.setAttribute("r", radius);
circle.setAttribute("class", "default");
const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("x", cx);
text.setAttribute("y", cy);
text.textContent = nr;
// 插入到 DOM 并替换原始 <house> 标签
house.replaceWith(circle, text);
// 关键：为每个房屋绑定输入监听器（支持实时模糊匹配）
input.addEventListener("input", () => {
const query = input.value.trim();
const isMatch = query && nr.toLowerCase().includes(query.toLowerCase());
circle.classList.toggle("selected", isMatch);
});
});
// 设置最终 viewBox（自动适配所有房屋坐标）
if (vbx.length && vby.length) {
svg.setAttribute("viewBox", `0 0 ${Math.max(...vbx)} ${Math.max(...vby)}`);
}
}, 0);
}
});
</script>✅ 优势说明：
- 无需硬编码 ID：房屋编号直接写在 <house> 标签内，支持任意字符串（"1a"、"007"、"B-12" 均可）；
- 模糊匹配友好：输入 "1" 可同时高亮 "01"、"1a"、"11"，大幅提升操作容错率；
- 样式与逻辑解耦：CSS 类 .selected 统一控制高亮效果，修改颜色/动画只需调整 CSS；
- 自动布局适配：viewBox 动态计算，确保所有房屋始终可见；
- 零依赖、纯原生：仅使用标准 Web API，兼容所有现代浏览器，无外部库负担。
⚠️ 注意事项：
- 输入框使用 input 事件（非 keyup），避免遗漏粘贴、语音输入等场景；
- 所有数值需经 Number() 或 .trim() 处理，防止空格或类型错误；
- 若需单选高亮（仅高亮首个匹配项），可将 toggle 改为先清除全部 .selected 类，再为首个匹配项添加；
- 生产环境建议添加防抖（debounce）以优化高频输入性能。
该方案将原本 8 个重复函数、8 个按钮的“硬编码模式”，简化为一份声明式 HTML + 30 行可复用 JS，真正践行了“配置优于编码”的工程原则——对一线急救人员而言，这意味着更快响应、更少失误、更高可靠性。
