... ... This is the code for you, to insert into the Properties of that page | Expert | Before the closing /HEAD tag:

<script>
/** --cerca nel testoK x WSx5 by KolAsim -- **/
$(document).ready(function () {
const $objectK = $('#table-pluginAppObj_19_11');
/**--fK--**/
const maxAttempts = 10; let attempt = 0; function waitForObjectAndInit() {
if ($objectK.length && $objectK.is(':visible')) { setTimeout(() => { initSearchScript($objectK); }, 1000); } else if (attempt < maxAttempts) { attempt++; setTimeout(waitForObjectAndInit, 1000); } else {} } waitForObjectAndInit(); }); function initSearchScript($objectK) { const styleK = ` <style> .highlight { background-color: yellow; } .active { background-color: orange; border: 1px solid red; } .controls, #toggleSearchControls { position: fixed; top: 10px; z-index: 10000001; } .controls button {cursor: pointer;} .controls { z-index: 10000001; left: 80px; background: white; padding: 2px; border: 1px solid #ccc; display: none; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } #toggleSearchControls { left: 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">&#x1f50d;Search</button>`; $('body').append(toggleButton); const formRicercaK = ` <div class="controls"> <input type="text" id="searchTerm" style = "width:100px" placeholder="Search..." /> <button type="button" id="btnSearch">Search</button> <button type="button" id="btnPrev" title = "Back">◄</button> <button type="button" id="btnNext" title = "Next">►</button> <button type="button" id="btnClear" title = "Delete">&otimes</button> <span id="status"></span> </div>`; $('body').append(formRicercaK); let matches = []; let current = -1; $('#toggleSearchControls').on('click', function () { $('.controls').fadeToggle(150); }); function walkTextNodes(node, callback) { $(node).contents().each(function () { if (this.nodeType === Node.TEXT_NODE) { callback(this); } else if (this.nodeType === Node.ELEMENT_NODE && !['SCRIPT', 'STYLE'].includes(this.tagName)) { walkTextNodes(this, callback); } }); } function doSearch() { clearSearch(); const term = $.trim($('#searchTerm').val()); if (!term) { $('#status').text(''); return; } const regex = new RegExp(term, 'gi'); $objectK.each(function () { walkTextNodes(this, function (textNode) { const text = textNode.nodeValue; const matchesInNode = []; let match; while ((match = regex.exec(text)) !== null) { matchesInNode.push({ index: match.index, length: match[0].length }); } if (matchesInNode.length > 0) { let lastIndex = 0; const $frag = $(document.createDocumentFragment()); for (const m of matchesInNode) { 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; } const after = text.substring(lastIndex); if (after) $frag.append(document.createTextNode(after)); $(textNode).replaceWith($frag); } }); }); if (matches.length > 0) { $('#status').text(`Trovate ${matches.length} occorrenze.`); current = -1; nextMatch(); } else { $('#status').text('No matches found.'); } } function nextMatch() { 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}`); } function prevMatch() { 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}`); } function clearSearch() { matches.forEach(span => { const $span = $(span); $span.replaceWith(document.createTextNode($span.text())); }); matches = []; current = -1; $('#status').text(''); } $('#btnSearch').on('click', doSearch); $('#btnNext').on('click', nextMatch); $('#btnPrev').on('click', prevMatch); $('#btnClear').on('click', clearSearch); $('#searchTerm').on('keydown', function (e) { if (e.key === 'Enter') doSearch(); }); }
</script>

..............................

.

Code is here: https://github.com/derekeder/csv-to-html-table

Create a subfolder and have it to work there - independently of X5.

When you have it to function then in X5 insert an html-object on the page where you want it.

In the html-object you define an iframe, and the content of that iframe is the view.

The only code you need in X5 is the code for the iframe

You can see this functioning here (down the page): https://kosraepower.com/customer-info.html

It is free

And it is better than the X5 viewer - much better. You can use links.

It is not the best on the net, but it is rather easy to handle.

There is also the very-easy-to-handle Luxviewer: https://www.luxsoft.eu/?luxview

Maybe this is the best solution for you. Easy to set up. You place it in an iframe. That's simple.

It is free. And it is supported. Maybe you should use that. I use it myself.

... OK ... the code follows later in the Post for Hanafi Salman, ... you need to customize the initial variable in objectK and the text in textK...
.
HI, ciao

.