CONTOH 004
SEARCH & HIGHLIGHT TEXT LIST-2
- SMAN 1 ANGSANA
- SMAN 1 BATULICIN
- SMAN 1 KARANG BINTANG
- SMAN 1 KURANJI
- SMAN 1 KUSAN HILIR
- SMAN 1 KUSAN HULU
- SMAN 1 MANTEWE
- SMAN 1 SATUI
- SMAN 1 SIMPANG EMPAT
- SMAN 1 SUNGAI LOBAN
- SMAN 2 SATUI
- SMAN 2 SIMPANG EMPAT
- SMKN 1 KUSAN HULU
- SMKN 1 KUSAN HILIR
- SMKN 1 MANTEWE
- SMKN 1 SATUI
- SMKN 1 SIMPANG EMPAT
- SMKN 1 SUNGAI LOBAN
- SMKN 2 SATUI
- SMKN 2 SIMPANG EMPAT
- SMA IT AL ASMAUL HUSNA
- SMA IT DAARUL ISHLAH ASSYAFI`IYAH
- SMA IT PLUS AR-RASYID
- SMA NUSANTARA
- SMK AL MADANI TERPADU
- SMK ALHIDAYAH
- SMK BANGUN BANUA
- SMK DDI BATULICIN
- SMK INSAN LUHUR NUSANTARA
- SMK ISLAM RAUDHATUL JANNAH
- SMK KODECO
- SMK MUHAMMADIYAH KUSAN HILIR
- SMK MUHAMMADIYAH SATUI
- SMK TELUK KEPAYANG
- SMK TUNAS BANGSA
- SLBN TANAH BUMBU
- SLB BAROKAH AJI
- MAN TANAH BUMBU
- MA DARUL AZHAR
- MA NU BAHRUL ULUM
- MA SYARIF ABBAS
- MA AL KAUTSAR
- MA AL-KAUTSAR
- MA AZ ZIKRA BATULICIN
- MA DARUL IJABAH
- MA HIDAYATUSSALAM
- MA NURUL HIDAYAH
- MA NURUL WATHAN
- MA RIADHUSSHALIHIN
- PDF ULYA DARUL HADID
HTML
<script>
/** --cerca nel testo2 x WSx5 by KolAsim -- **/
$(document).ready(function () {/*K>*/
const $objectK = $('.text-inner');
const styleK = ` <style> .highlight { background-color: yellow; } .active { background-color: orange; border: 1px solid red; } .controls, #toggleSearchControls { position: fixed; top: 10px; z-index: 10000; } .controls {z-index:1000000; left: 80px; background: white; padding: 2px; border: 1px solid #ccc; display: none; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } #toggleSearchControls { positionXX:fixed;z-indexXX:10000000;topXX:100px leftXX: 10px; background: blue; color: white; border: none; padding: 4px 10px; cursor: pointer; border-radius: 4px; } #toggleSearchControls:hover { background: Crimson; } </style>`; $('head').append(styleK); const toggleButton = `<button id="toggleSearchControls" title="Open/Close-Search">🔍Search</button>`; $('body').append(toggleButton); const formRicercaK = ` <div class="controls"> <input type="text" id="searchTerm" placeholder="Search..." /> <button type="button" id="btnSearch">Search</button> <button type="button" id="btnPrev">« Back</button> <button type="button" id="btnNext">Next »</button> <button type="button" id="btnClear">Delete</button> <span id="status"></span> </div>`; $('body').append(formRicercaK); let matches = []; let current = -1; $('#toggleSearchControls').on('click', function () {/*K1>*/ $('.controls').fadeToggle(150); });/*K1<<*/ /**--fK--**/ function walkTextNodes(node, callback) {/*K2>*/ $(node).contents().each(function () {/*K3>*/ if (this.nodeType === Node.TEXT_NODE) {/*K4>*/ callback(this); } else if (this.nodeType === Node.ELEMENT_NODE && !['SCRIPT', 'STYLE'].includes(this.tagName)) { walkTextNodes(this, callback); }/*K4<<*/ });/*K3<<*/ }/*K2<<*/ /**--fK--**/ function doSearch() {/*K5>*/ clearSearch(); const term = $.trim($('#searchTerm').val()); if (!term) {/*K6>*/ $('#status').text(''); return; }/*K6<<*/ const regex = new RegExp(term, 'gi'); const $containers = $objectK; $containers.each(function () {/*K7>*/ walkTextNodes(this, function (textNode) {/*K8>*/ const text = textNode.nodeValue; const matchesInNode = []; let match; while ((match = regex.exec(text)) !== null) {/*K9>*/ matchesInNode.push({ index: match.index, length: match[0].length }); }/*K9<<*/ if (matchesInNode.length > 0) {/*K10>*/ let lastIndex = 0; const $frag = $(document.createDocumentFragment()); for (const m of matchesInNode) {/*K11>*/ const before = text.substring(lastIndex, m.index); if (before) $frag.append(document.createTextNode(before)); const $span = $('<span>') .addClass('highlight') .text(text.substr(m.index, m.length)); $frag.append($span[0]); matches.push($span[0]); lastIndex = m.index + m.length; }/*K11<<*/ const after = text.substring(lastIndex); if (after) $frag.append(document.createTextNode(after));/*K12>|<<*/ $(textNode).replaceWith($frag); }/*K10<<*/ });/*K9<<*/ });/*K8<<*/ if (matches.length > 0) {/*K13>*/ $('#status').text(`Trovate ${matches.length} occorrenze.`); current = -1; nextMatch(); } else { $('#status').text('No matches found.'); }/*K13<<*/ }/*K13<<*/ /**--fK--**/ function nextMatch() {/*K14>*/ if (matches.length === 0) return; if (current >= 0) $(matches[current]).removeClass('active'); current = (current + 1) % matches.length; $(matches[current]).addClass('active'); matches[current].scrollIntoView({ behavior: 'smooth', block: 'center' }); $('#status').text(`Result ${current + 1} of ${matches.length}`); }/*K14<<*/ /**--fK--**/ function prevMatch() {/*K15>*/ if (matches.length === 0) return; if (current >= 0) $(matches[current]).removeClass('active'); current = (current - 1 + matches.length) % matches.length; $(matches[current]).addClass('active'); matches[current].scrollIntoView({ behavior: 'smooth', block: 'center' }); $('#status').text(`Result ${current + 1} di ${matches.length}`); }/*K15<<*/ /**--fK--**/ function clearSearch() {/*K16>*/ matches.forEach(span => {/*K17>*/ const $span = $(span); $span.replaceWith(document.createTextNode($span.text())); });/*K17<<*/ matches = []; current = -1; $('#status').text(''); }/*K16<<*/ $('#btnSearch').on('click', doSearch); $('#btnNext').on('click', nextMatch); $('#btnPrev').on('click', prevMatch); $('#btnClear').on('click', clearSearch); $('#searchTerm').on('keydown', function (e) {/*K18>*/ if (e.key === 'Enter') doSearch(); });/*K18<<*/ });/*K<<*/
</script>