Hello Hanafi,

from my side, your link does not works. Error : DNS_PROBE_FINISHED_NXDOMAIN

On my example, maybe it could be useful

https://wsx5demo.afsoftware.fr/homebis.php

Axel

Take a look here: https://derekeder.github.io/csv-to-html-table/

Yes John like this https://derekeder.github.io/csv-to-html-table/

but unfortunately I do not understand and can not find the code

Hi Axel, text searched on https://wsx5demo.afsoftware.fr/homebis.php is for search and highlight text within the page object but not for search within CSV table.. the js code link above was created by KolAsim

@Hanafi

Yes the code on my demo if from KolAsim and documented into source code.

so what the subject of your remark ?

it is a solution . And i think it can works into any object on the page. inspect my demo to get the code and test it

if not useful for you, go away

bye 

Axel

(It > En) ... try my custom code for your CSV table...
... take it blind, and it obviously won't paginate...
... you should get the same result as my simulated PRINT STAMP:

.

ciao

.

... ... 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

Thanks for the code @KolAsim, I applied that it can search a word where we are in current page only within csv table, but when I click "Next ►", not show directly for result on other page containing the word.

And if I search on the other page, for example, I am on page 1 searching for a word, and the word is on page 30... the results do not immediately display the contents of page 30.

@Axel

Thanks but I applied not work on csv table.. work only for text object

I am sorry @John I am still confuse for the code, It says set options in index.html, but on websitex5 the code should be placed in Properties of that page | Expert | Before the closing /HEAD tag

I don't understand coding at all and it says in step 4 and 5 run and deploy.. sorry make me confuse

anyway thanks for your information