本文详解如何使用原生 JavaScript 实现表单驱动的关键词搜索，精准定位并平滑滚动至匹配文本所在父级 div，同时添加视觉显著的 CSS 高亮效果；支持“Find → Next”状态切换与连续结果遍历，兼容现代浏览器（含 Safari），彻底替代过时的 window.find 方案。
本文详解如何使用原生 javascript 实现表单驱动的关键词搜索，精准定位并平滑滚动至匹配文本所在父级 div，同时添加视觉显著的 css 高亮效果；支持“find → next”状态切换与连续结果遍历，兼容现代浏览器（含 safari），彻底替代过时的 `window.find` 方案。
在构建内容密集型网页（如游泳运动员名录页）时，仅高亮关键词本身（如用 background: red）往往不够醒目——尤其在移动端或高对比度场景下易被忽略。更优解是：定位到关键词所在的语义化父容器（如 .wpb_single_image），为其添加动态边框/阴影/背景色，并执行 smooth 行为的 scrollIntoView()。以下为完整、健壮、可直接落地的专业实现方案。
✅ 核心思路拆解
- 不依赖 window.find：该 API 已被现代浏览器逐步弃用，且在 Safari 中完全失效，必须移除。
- 以父容器为操作单元：通过 textContent 或 innerText 检索子文本，匹配成功后操作其父级 DOM 节点（非文本节点本身）。
- 状态记忆与循环导航：记录当前高亮索引（currentIndex），点击“Next”时从下一位置继续搜索，避免重复定位。
- 平滑滚动 + 精准对齐：使用 element.scrollIntoView({ behavior: 'smooth', block: 'center' }) 确保目标居中显示，提升可读性。
✅ 完整可运行代码
首先，为高亮状态定义 CSS 类（推荐加入
.swim-srch-actv {
border: 3px solid #4a90e2;
box-shadow: 0 0 12px rgba(74, 144, 226, 0.5);
border-radius: 6px;
transition: all 0.3s ease; /* 平滑过渡增强体验 */
}接着，替换原有 HTML 表单中的内联 JS，并绑定现代事件监听器（注意：移除 onsubmit="..." 冗余逻辑）：
<div id="stickysearch">
<div>
<h4><strong>Search for a swimmer</strong></h4>
<form id="f1">
<input type="text" id="t1" name="t1" placeholder="Enter a name" autocomplete="off">
<input type="submit" id="b1" name="b1" value="Find">
</form>
</div>
</div>最后，注入核心 JavaScript（建议置于 DOMContentLoaded 或
