要实现文字查询并自动滚动到匹配到的文本范围
作者:
头发飘逸 | 来源:发表于
2023-08-06 14:58 被阅读0次<!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>
本文标题：要实现文字查询并自动滚动到匹配到的文本范围
本文链接：https://www.haomeiwen.com/subject/upqwpdtx.html
网友评论