实现搜索关键词后平滑滚动并高亮目标元素的父容器，并支持多结果循环导航

本文详解如何使用原生 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 或