Search Functionality<\/title><\/p>\n<style>\n<p>.search-container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 20px;<\/p>\n<p>}<\/p>\n<p>#search-input {\n width: 300px;\n padding: 10px;\n font-size: 18px;\n border: 1px solid #ccc;\n border-radius: 4px;\n margin-right: 10px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}<\/p>\n<p>button {\n padding: 10px 20px;\n font-size: 18px;\n background-color: #f5f5f5;\n color: #333;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}<\/p>\n<p>.highlight {\n background-color: yellow;\n}<\/p>\n<\/style>\n<p><\/head><br \/>\n<body><br \/>\n <input type=\"text\" id=\"search-input\" placeholder=\"I\u0161\u010di...\"><br \/>\n <button onclick=\"searchText()\">I\u0161\u010di<\/button><br \/>\n<script>document.addEventListener('DOMContentLoaded', () => {\n const searchInput = document.getElementById('search-input');<\/p>\n<p> searchInput.addEventListener('keydown', (event) => {\n if (event.key === 'Enter') {\n searchText();\n }\n });\n});<\/p>\n<p>function searchText() {\n \/\/ Get the search query\n const query = document.getElementById('search-input').value;\n if (!query) return;<\/p>\n<p> \/\/ Remove existing highlights\n removeHighlights();<\/p>\n<p> \/\/ Get all the text nodes in the body\n const textNodes = getTextNodes(document.body);<\/p>\n<p> \/\/ Highlight the search query\n const firstHighlight = highlightText(textNodes, query);<\/p>\n<p> \/\/ Scroll to the first highlight\n if (firstHighlight) {\n firstHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' });\n firstHighlight.focus(); \/\/ Optional: Focus the first highlight for better visibility\n }\n}<\/p>\n<p>function getTextNodes(node) {\n let textNodes = [];\n if (node.nodeType === Node.TEXT_NODE) {\n textNodes.push(node);\n } else {\n node.childNodes.forEach(child => {\n textNodes = textNodes.concat(getTextNodes(child));\n });\n }\n return textNodes;\n}<\/p>\n<p>function highlightText(textNodes, query) {\n const queryRegex = new RegExp(query, 'gi');\n let firstHighlight = null;<\/p>\n<p> textNodes.forEach(node => {\n const matches = node.textContent.match(queryRegex);\n if (matches) {\n const parent = node.parentNode;\n const highlightedFragment = document.createDocumentFragment();<\/p>\n<p> let lastIndex = 0;\n node.textContent.split(queryRegex).forEach((part, index) => {\n if (index > 0) {\n const highlightSpan = document.createElement('span');\n highlightSpan.classList.add('highlight');\n highlightSpan.textContent = matches[index - 1];\n highlightSpan.tabIndex = -1; \/\/ Make the span focusable<\/p>\n<p> if (!firstHighlight) {\n firstHighlight = highlightSpan;\n }<\/p>\n<p> highlightedFragment.appendChild(highlightSpan);\n }\n highlightedFragment.appendChild(document.createTextNode(part));\n lastIndex += part.length + (matches[index - 1] ? matches[index - 1].length : 0);\n });<\/p>\n<p> parent.replaceChild(highlightedFragment, node);\n }\n });<\/p>\n<p> return firstHighlight;\n}<\/p>\n<p>function removeHighlights() {\n document.querySelectorAll('.highlight').forEach(el => {\n const parent = el.parentNode;\n parent.replaceChild(document.createTextNode(el.textContent), el);\n parent.normalize(); \/\/ Merge adjacent text nodes\n });\n}<\/p>\n<p><\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<\/div>\n<div>\n<\/div>\n<p><br \/>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>NASTANITVE Search Functionality I\u0161\u010di<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[],"tags":[],"class_list":["post-2319","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/pages\/2319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/comments?post=2319"}],"version-history":[{"count":116,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/pages\/2319\/revisions"}],"predecessor-version":[{"id":3102,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/pages\/2319\/revisions\/3102"}],"wp:attachment":[{"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/media?parent=2319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/categories?post=2319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/tags?post=2319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\n Search Functionality<\/title><\/p>\n<style>\n<p>.search-container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 20px;<\/p>\n<p>}<\/p>\n<p>#search-input {\n width: 300px;\n padding: 10px;\n font-size: 18px;\n border: 1px solid #ccc;\n border-radius: 4px;\n margin-right: 10px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}<\/p>\n<p>button {\n padding: 10px 20px;\n font-size: 18px;\n background-color: #f5f5f5;\n color: #333;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}<\/p>\n<p>.highlight {\n background-color: yellow;\n}<\/p>\n<\/style>\n<p><\/head><br \/>\n<body><br \/>\n <input type=\"text\" id=\"search-input\" placeholder=\"I\u0161\u010di...\"><br \/>\n <button onclick=\"searchText()\">I\u0161\u010di<\/button><br \/>\n<script>document.addEventListener('DOMContentLoaded', () => {\n const searchInput = document.getElementById('search-input');<\/p>\n<p> searchInput.addEventListener('keydown', (event) => {\n if (event.key === 'Enter') {\n searchText();\n }\n });\n});<\/p>\n<p>function searchText() {\n \/\/ Get the search query\n const query = document.getElementById('search-input').value;\n if (!query) return;<\/p>\n<p> \/\/ Remove existing highlights\n removeHighlights();<\/p>\n<p> \/\/ Get all the text nodes in the body\n const textNodes = getTextNodes(document.body);<\/p>\n<p> \/\/ Highlight the search query\n const firstHighlight = highlightText(textNodes, query);<\/p>\n<p> \/\/ Scroll to the first highlight\n if (firstHighlight) {\n firstHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' });\n firstHighlight.focus(); \/\/ Optional: Focus the first highlight for better visibility\n }\n}<\/p>\n<p>function getTextNodes(node) {\n let textNodes = [];\n if (node.nodeType === Node.TEXT_NODE) {\n textNodes.push(node);\n } else {\n node.childNodes.forEach(child => {\n textNodes = textNodes.concat(getTextNodes(child));\n });\n }\n return textNodes;\n}<\/p>\n<p>function highlightText(textNodes, query) {\n const queryRegex = new RegExp(query, 'gi');\n let firstHighlight = null;<\/p>\n<p> textNodes.forEach(node => {\n const matches = node.textContent.match(queryRegex);\n if (matches) {\n const parent = node.parentNode;\n const highlightedFragment = document.createDocumentFragment();<\/p>\n<p> let lastIndex = 0;\n node.textContent.split(queryRegex).forEach((part, index) => {\n if (index > 0) {\n const highlightSpan = document.createElement('span');\n highlightSpan.classList.add('highlight');\n highlightSpan.textContent = matches[index - 1];\n highlightSpan.tabIndex = -1; \/\/ Make the span focusable<\/p>\n<p> if (!firstHighlight) {\n firstHighlight = highlightSpan;\n }<\/p>\n<p> highlightedFragment.appendChild(highlightSpan);\n }\n highlightedFragment.appendChild(document.createTextNode(part));\n lastIndex += part.length + (matches[index - 1] ? matches[index - 1].length : 0);\n });<\/p>\n<p> parent.replaceChild(highlightedFragment, node);\n }\n });<\/p>\n<p> return firstHighlight;\n}<\/p>\n<p>function removeHighlights() {\n document.querySelectorAll('.highlight').forEach(el => {\n const parent = el.parentNode;\n parent.replaceChild(document.createTextNode(el.textContent), el);\n parent.normalize(); \/\/ Merge adjacent text nodes\n });\n}<\/p>\n<p><\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<\/div>\n<div>\n<\/div>\n<p><br \/>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>NASTANITVE Search Functionality I\u0161\u010di<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[],"tags":[],"class_list":["post-2319","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/pages\/2319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/comments?post=2319"}],"version-history":[{"count":116,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/pages\/2319\/revisions"}],"predecessor-version":[{"id":3102,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/pages\/2319\/revisions\/3102"}],"wp:attachment":[{"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/media?parent=2319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/categories?post=2319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/noella.si\/new\/wp-json\/wp\/v2\/tags?post=2319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}