Style:
<style>
.highlight {
background-color: yellow; /* Warna latar belakang untuk highlight */
font-weight: bold;
}
</style>
HTML:
<div class="search-popup">
<div class="color-layer"></div>
<button class="close-search"><span class="fas fa-times fa-fw"></span></button>
<form method="GET" action="#">
<div class="form-group">
<input type="search" name="search-field" id="searchInput" value="" placeholder="Search Here" required="">
</div>
</form>
</div>
Script:
<script> document.getElementById('searchInput').addEventListener('input', function() { const searchValue = this.value.trim().toLowerCase(); removeHighlights(); if (searchValue) { highlightText(searchValue); }});
function removeHighlights() { const highlightedElements = document.querySelectorAll('.highlight'); highlightedElements.forEach(function(element) { const parent = element.parentNode; parent.replaceChild(document.createTextNode(element.textContent), element); parent.normalize(); // Gabungkan text nodes yang terpisah setelah penghapusan });}
function highlightText(searchValue) { const textNodes = getTextNodesUnder(document.body); let firstMatchFound = false; textNodes.forEach(function(node) { const nodeValue = node.nodeValue.toLowerCase(); const index = nodeValue.indexOf(searchValue); if (index >= 0) { const span = document.createElement('span'); span.className = 'highlight'; const matchedText = node.splitText(index); matchedText.splitText(searchValue.length); const clone = matchedText.cloneNode(true); span.appendChild(clone); matchedText.parentNode.replaceChild(span, matchedText); // Auto-scroll ke teks yang pertama ditemukan if (!firstMatchFound) { span.scrollIntoView({ behavior: 'smooth', block: 'center' }); firstMatchFound = true; } } });}
function getTextNodesUnder(element) { let textNodes = []; const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false); let node; while (node = walker.nextNode()) { textNodes.push(node); } return textNodes;}
</script>
Whole code:
<style>
.highlight {
background-color: yellow; /* Warna latar belakang untuk highlight */
font-weight: bold;
}
</style>
<div class="search-popup"> <div class="color-layer"></div> <button class="close-search"><span class="fas fa-times fa-fw"></span></button> <form method="GET" action="#"> <div class="form-group"> <input type="search" name="search-field" id="searchInput" value="" placeholder="Search Here" required=""> </div> </form></div>
<script> document.getElementById('searchInput').addEventListener('input', function() { const searchValue = this.value.trim().toLowerCase(); removeHighlights(); if (searchValue) { highlightText(searchValue); }});
function removeHighlights() { const highlightedElements = document.querySelectorAll('.highlight'); highlightedElements.forEach(function(element) { const parent = element.parentNode; parent.replaceChild(document.createTextNode(element.textContent), element); parent.normalize(); // Gabungkan text nodes yang terpisah setelah penghapusan });}
function highlightText(searchValue) { const textNodes = getTextNodesUnder(document.body); let firstMatchFound = false; textNodes.forEach(function(node) { const nodeValue = node.nodeValue.toLowerCase(); const index = nodeValue.indexOf(searchValue); if (index >= 0) { const span = document.createElement('span'); span.className = 'highlight'; const matchedText = node.splitText(index); matchedText.splitText(searchValue.length); const clone = matchedText.cloneNode(true); span.appendChild(clone); matchedText.parentNode.replaceChild(span, matchedText); // Auto-scroll ke teks yang pertama ditemukan if (!firstMatchFound) { span.scrollIntoView({ behavior: 'smooth', block: 'center' }); firstMatchFound = true; } } });}
function getTextNodesUnder(element) { let textNodes = []; const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false); let node; while (node = walker.nextNode()) { textNodes.push(node); } return textNodes;}
</script>
Result:
