JavaScript实现高级搜索：平滑滚动与父元素高亮教程

<div id="stickysearch">
    <div>
        <h4><strong>搜索游泳者</strong></h4>
        <form id="f1" name="f1" action="" onsubmit="if(this.t1.value!=null && this.t1.value!='') 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>
<div class="wpb_single_image">
    <p>游泳者姓名：王五</p>
    <!-- 其他内容 -->
</div>

/* 用于高亮搜索结果父元素的样式 */
.swim-srch-actv {
    border: 3px solid #ffcc00; /* 醒目的黄色边框 */
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.7); /* 柔和的阴影效果 */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 平滑过渡效果 */
    background-color: #fffacd; /* 浅黄色背景，增加可见性 */
}

/* 确保目标元素可见且具有高度和宽度 */
.wpb_single_image {
    /* 假设这是搜索目标父元素的默认样式 */
    padding: 15px;
    margin: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    box-sizing: border-box; /* 确保 padding 和 border 不会增加元素总宽度 */
}

// 1. 监听输入框事件，当用户输入时清除所有高亮
document.getElementById('t1').addEventListener('input', function(e) {
    var elements = document.getElementsByClassName('wpb_single_image');
    for (var i = 0; i < elements.length; i++) {
        elements[i].classList.remove('swim-srch-actv'); // 移除所有高亮类
    }
    // 当输入框内容改变时，将按钮重置为“查找”
    document.getElementById('b1').value = '查找';
});

// 2. 核心搜索函数
function findString(str) {
    var elements = document.getElementsByClassName('wpb_single_image'); // 获取所有潜在的搜索目标父元素
    var nextButton = document.getElementById('b1'); // 获取“查找/下一个”按钮
    var currentIndex = -1; // 用于追踪当前高亮的元素索引

    // 查找当前是否已有高亮元素，如果有，记录其索引
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].classList.contains('swim-srch-actv')) {
            currentIndex = i;
            break;
        }
    }

    // 在新搜索开始前，清除所有旧的高亮
    for (var i = 0; i < elements.length; i++) {
        elements[i].classList.remove('swim-srch-actv');
    }

    if (str.trim() !== '') { // 确保搜索字符串不为空
        var found = false;
        // 从当前索引的下一个元素开始搜索，实现“下一个”功能
        // 如果是首次搜索或点击“查找”，currentIndex 为 -1，则从 i=0 开始
        for (var i = currentIndex + 1; i < elements.length; i++) {
            var swimmerText = elements[i].textContent || elements[i].innerText; // 获取元素内文本
            // 忽略大小写进行匹配
            if (swimmerText.toLowerCase().includes(str.toLowerCase())) {
                currentIndex = i; // 更新当前高亮索引
                elements[i].classList.add('swim-srch-actv'); // 添加高亮类
                // 平滑滚动到该元素，并使其居中显示
                elements[i].scrollIntoView({
                    behavior: 'smooth', // 启用平滑滚动
                    block: 'center'     // 将元素滚动到视口中央
                });
                found = true;
                break; // 找到一个结果后停止当前循环
            }
        }

        if (found) {
            // 如果找到了结果
            if (currentIndex === elements.length - 1) {
                // 如果是最后一个结果，按钮显示“查找”（从头开始）
                nextButton.value = '查找';
                // 此时将 currentIndex 重置为 -1，以便下次点击“查找”时从头开始
                currentIndex = -1;
            } else {
                // 否则，按钮显示“下一个”
                nextButton.value = '下一个';
            }
        } else {
            // 如果没有找到更多结果
            alert("抱歉，没有找到更多 '" + str + "'。");
            nextButton.value = '查找'; // 按钮重置为“查找”
            currentIndex = -1; // 重置索引
        }
    } else {
        alert("请输入要搜索的姓名。"); // 提示用户输入内容
        nextButton.value = '查找'; // 重置按钮
        currentIndex = -1; // 重置索引
    }
}