使用JavaScript实现平滑滚动与父级元素高亮搜索功能

<div id="stickysearch">
    <div>
        <h4><strong>搜索游泳者</strong></h4>
        <form id="f1" name="f1" action="" onsubmit="findString(this.t1.value); return false;">
            <input type="text" id="t1" name="t1" value="" size="20" placeholder="输入姓名">
            <input type="submit" id="b1" name="b1" value="查找">
        </form>
    </div>
</div>

<!-- 假设页面中有很多这样的元素，它们是搜索的目标容器 -->
<div class="wpb_single_image">
    <p>游泳者姓名: 张三</p>
    <!-- 其他内容 -->
</div>
<div class="wpb_single_image">
    <p>游泳者姓名: 李四</p>
    <!-- 其他内容 -->
</div>
<!-- 更多 .wpb_single_image 元素 -->

.swim-srch-actv {
    border: 3px solid #ffcc00; /* 例如，添加一个黄色边框 */
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.7); /* 添加阴影效果 */
    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 平滑过渡效果 */
}

// 获取搜索输入框和提交按钮
const searchInput = document.getElementById('t1');
const nextButton = document.getElementById('b1');
// 假设所有可搜索的父级元素都具有 'wpb_single_image' 类
const searchableElements = document.getElementsByClassName('wpb_single_image');

let currentIndex = -1; // 用于追踪当前高亮的元素索引

// 监听输入框的输入事件，当用户输入时清除所有高亮
searchInput.addEventListener('input', function() {
    // 遍历所有可搜索元素，移除高亮类
    for (let i = 0; i < searchableElements.length; i++) {
        searchableElements[i].classList.remove('swim-srch-actv');
    }
    currentIndex = -1; // 重置当前索引
    nextButton.value = '查找'; // 将按钮文本重置为“查找”
});

/**
 * 根据用户输入的字符串查找并高亮匹配的父级元素，并平滑滚动到其位置。
 * 支持“查找”和“下一个”功能。
 * @param {string} str - 用户输入的搜索字符串。
 */
function findString(str) {
    const trimmedStr = str.trim();

    // 1. 清除所有现有高亮（如果不是“下一个”搜索）
    // 只有在用户重新输入或首次搜索时才需要完全清除
    // 对于“下一个”搜索，我们只移除当前高亮
    if (nextButton.value === '查找' || currentIndex === -1) {
        for (let i = 0; i < searchableElements.length; i++) {
            searchableElements[i].classList.remove('swim-srch-actv');
        }
        currentIndex = -1; // 重置索引以便从头开始搜索
    }

    if (trimmedStr === '') {
        alert("请输入一个游泳者的姓名进行搜索。");
        return;
    }

    let found = false;
    // 从当前索引的下一个位置开始搜索，实现“下一个”功能
    const startIndex = (currentIndex === -1 || nextButton.value === '查找') ? 0 : currentIndex + 1;

    for (let i = startIndex; i < searchableElements.length; i++) {
        const swimmerText = searchableElements[i].textContent || searchableElements[i].innerText;
        // 执行不区分大小写的搜索
        if (swimmerText.toLowerCase().includes(trimmedStr.toLowerCase())) {
            // 找到匹配项
            currentIndex = i; // 更新当前高亮元素的索引
            searchableElements[i].classList.add('swim-srch-actv'); // 添加高亮类
            // 平滑滚动到该元素，并使其在视口中居中
            searchableElements[i].scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            found = true;
            break; // 找到一个就停止，等待用户点击“下一个”
        }
    }

    if (found) {
        // 如果找到，根据是否还有后续结果来更新按钮文本
        if (currentIndex < searchableElements.length - 1) {
            nextButton.value = '下一个';
        } else {
            nextButton.value = '查找'; // 已经是最后一个结果，回到“查找”
        }
    } else {
        // 如果没有找到（或没有更多），提示用户
        alert(`抱歉，没有找到更多关于 '${trimmedStr}' 的结果。`);
        nextButton.value = '查找'; // 重置按钮文本
        currentIndex = -1; // 重置索引
    }
}