要实现文字查询并自动滚动到匹配到的文本范围-阿里云开发者社区

要实现文字查询并自动滚动到匹配到的文本范围

2024-09-12 17

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 要实现文字查询并自动滚动到匹配到的文本范围

<!DOCTYPE html>
<html>
    <head>
        <title>Text Search and Scroll</title>
    </head>
    <body>
        <input type="text" id="search-input" placeholder="Enter search term">
        <button id="search-button">Search</button>

        <div id="scroll-container" style="overflow: auto; height: 100px;">
            <div class="text-item">Text 1</div>
            <div class="text-item">Text 2</div>
            <div class="text-item">Text 3</div>
            <div class="text-item">Text 4</div>
            <div class="text-item">Text 5</div>
            <div class="text-item">Text 6</div>
            <div class="text-item">Text 7</div>
            <div class="text-item">Text 8</div>
            <div class="text-item">Text 9</div>
            <div class="text-item">Text 10</div>
            <!-- ... and so on -->
        </div>

        <script>
            const searchButton = document.getElementById('search-button');
            const scrollContainer = document.getElementById('scroll-container');

            searchButton.addEventListener('click', () => {
   
                const searchTerm = document.getElementById('search-input').value;
                const elements = scrollContainer.getElementsByClassName('text-item');

                for (let i = 0; i < elements.length; i++) {
   
                    const element = elements[i];
                    if (element.textContent.includes(searchTerm)) {
   
                        element.scrollIntoView({
   
                            behavior: 'smooth',
                            block: 'center'
                        });
                        break;
                    }
                }
            });
        </script>
    </body>
</html>

要实现文字查询并自动滚动到匹配到的文本范围

热门文章

最新文章

相关电子书