Search and Highlight text on specific page 
Autore: Hanafi Salman
Visite 587,
Followers 2,
Condiviso 0
Hi, is there any HTML code to search text and highlight it in a whole certain page?
The object search button only search whole site and e-commerce, but none for a certain page that we want.
Thanks for the help.
Postato il
Until this feature is available, visitors could use the browser search, see Screenshot below
Maybe point visitors to this browser feature.
-----
Autore
Thanks for the answer, I got html codes from AI to make Search and Highlight.. but I can not combine to other object in the page I made.. can you help, I mean to be able to read and recognize the text the we search using codes that I got from, can read the text object under the html object (capture enclosed)
Thanks a lot
It would be helpful to insert the code directly into the input field here, so it doesn't have to be laboriously typed out.
The code could then be copied and tested by users in the community to see where in WebSite X5 which code needs to be inserted and what might need to be adjusted.
There are also HTML and JavaScript experts here if additional code is needed.
Autore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Search and Highlight Text</title>
<style>
mark.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" id="search" placeholder="Search text..." />
<div id="content">
<p>This is some example text where you can search and highlight words.</p>
<p>Try typing in the box above to see matched text highlighted dynamically.</p>
</div>
<script>
const content = document.getElementById('content');
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', () => {
const searchTerm = searchInput.value.trim();
// Remove any existing highlights first by resetting innerHTML to original text without <mark>
const originalText = content.textContent;
if (!searchTerm) {
content.innerHTML = originalText;
return;
}
// Create a case-insensitive regex for all instances of searchTerm
const regex = new RegExp(searchTerm, 'gi');
// Replace matches with <mark> wrapped highlighted text
const newText = originalText.replace(regex, (match) => `<mark class="highlight">${match}</mark>`);
content.innerHTML = newText;
});
</script>
</body>
</html>
This is the script I got from AI.. I have no knowledge of coding
If the code is inserted into the HTML object of WebSite X5, it works.
However, for use with text objects on the same page, JavaScript experts will need to adapt the code so that the code can search within the text object.
So we'll wait and see if KolAsim (a JavaScript expert) or someone else can adapt the code.
Autore
Thanks Daniel..
"However, for use with text objects on the same page, JavaScript experts will need to adapt the code so that the code can search within the text object."
Yes.. Exactly, I can't wait for that
Now I have the solution.
At the top of the grid is the HTML object with the search field and the CSS code.
Below that is the text object.
And below that is the HTML object with the JavaScript code.
Test in WebSite X5
-----
1) HTML objekt - tab "HTML-Code":
<input type="text" id="search" placeholder="Search text..." />
2) Text objekt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed ...
3) HTML objekt tab "HTML-Code:
<script>
const content = document.getElementById('imTextObject_45_03');
... here the full Javascript code ...
</script>
Note: You can find this >> imTextObject_45_03 << when the text object is selected and "Code" is clicked at the top.
My test page
>> https://findelinks.de/123test-aufklappmenue-2/test-suchfunktion-mit-code.html
----
Autore
Your test page is so perfect.. I will try to do to follow your instruction
Can you show or give the complete script code for number 1 and 3. Thanks so much for your help, I do really appreciate. Thanks lots Daniel..
Autore
The text object contains numbering, the result of search and highlight text without numbering anymore.
Can you help for numbering still stayed while highlight text appear after searching.
Thanks for help..
Here, JavaScript experts have to help to adapt the code so that the numbering is retained as a list.
As I just noticed, all formatting in the text object is lost and a text mush is created.
The easiest way would be to use the browser's own search function, which is easily accessible using the keyboard shortcutCtrl + F.
-----
Autore
Yes.. I've known before, using Ctrl F for PC and menu icon (three dots) and select "Find in page" or "Find and replace" for Mobile. but make it simple and easy for users especially old people using PC/Smartphone.
I am still waiting for JavaScript experts in this community, if there is solution to adapt directly on Website X5 without using browser's own serach function.
Anyway, thanks so much Daniel..
Years ago, I made something like that.
It is made for all pages and can be seen top left.
Example on this page: https://bramminginfo.dk/hollenderskoven.html
It will open a function where you can search for a phrase for either the actual page or for all pages. All pages uses the X5 search.
Try to click the "Søg on/off"
Then
type "skoven" in the open field and then click "søg på siden"
The function will find the text on the page and highlight it - and new click will jump to the next and ....
If it is something similar you are looking for, I could maybe dig up the code.
Else you could maybe be inspired by it.
Autore
I have opened the site https://bramminginfo.dk/hollenderskoven.html, tried to search a word or some words, yes that's right John, exactly what I am looking for especially search highlight word on page only. I think yours more complete on searching and the result of searching can be made sequence word by word, not all search words are highlighted.
I really need the code if you don't mind. thanks so much John..
Autore
Hope the code used for numbering on text object is also retained as a list.
The code for the page-search is JS, so you can see it in the source-code for the page.
I could make a quick-and-dirty where I remove a lot of the code and the result should be a functioning stand-alone html page where a page search can be performed.
The code is simple - there is no index for the search-text
If you want a count of occurences, numbering and search-direction, then you have to tell your users that most browsers offer a search-function that is able to give that.
(It > En) ...I'm not a JS expert, but I like to experiment and invent my own...
...if you post the link to your online page, I can evaluate whether my unique dynamic code could be used, which performs a browser-like search and only in text objects...
[click opens search] >> ( [-input-] | [search] | [<back] | [next>] | [delete] )
...!...when and if you post your link, I'll come back here.../...
.
ciao
.
Autore
I am sorry John, I do not understand how to see the source-code for the page..
Autore
Mr. KolAsim, here is my online page, https://ica.web.id/daftarsma.html
Can search and highlight text without lost formatting contained in the text object.
Thanks so much
... OK ...
...!...remove all the previous EXTRA code you added to the page...!...
... this is one of my two or three search inventions. In this case, my invention searches the table, and then transforms the text list rows into a table and dynamically adds the search form...
... here's my code that applies with just a copy/paste:
<script>
/**--converte lista testo in tabella ed applica form di ricerca x WSx5 by KolAsim--**/
$( document ).ready(function() {/*K>*/ (function(){/*K1>*/ var $textInner = $("#imTextObject_3_01_tab0 .text-inner"); if($textInner.length === 0){/*K2>*/ console.warn("Nessun .text-inner trovato dentro #imTextObject_3_01_tab0"); return; }/*K2<<*/ var $ol = $textInner.find("ol").first(); if($ol.length === 0){/*K3>*/ console.warn("Nessun <ol> trovato dentro .text-inner"); return; }/*K3<<*/ if($("#schoolTable").length > 0){/*K4>*/ console.warn("Tabella già presente, esco"); return; }/*K4<<*/ var $lis = $ol.find("li"); if($lis.length === 0){/*K5>*/ console.warn("Nessun <li> trovato dentro <ol>"); return; }/*K5<<*/ var $searchContainer = $('<div style="margin-bottom:10px;"></div>'); var $input = $('<input type="text" id="tableSearch" placeholder="Inserisci nome scuola..." style="padding:5px; width:250px;">'); var $searchBtn = $('<button id="searchBtn" style="margin-left:10px; padding:5px;">Search</button>'); var $resetBtn = $('<button id="resetSearch" style="margin-left:5px; padding:5px;">Reset</button>'); $searchContainer.append($input, $searchBtn, $resetBtn); var $table = $('<table id="schoolTable" border="1" cellspacing="0" cellpadding="5" style="width:100%; border-collapse:collapse;"><thead><tr><th></th><th>School Name</th></tr></thead><tbody></tbody></table>'); var $tbody = $table.find("tbody"); $lis.each(function(i){/*K6>*/ var text = $(this).text(); var $tr = $('<tr></tr>'); $tr.append('<td>' + (i+1) + '</td>'); $tr.append('<td>' + text + '</td>'); $tbody.append($tr); });/*K6>*/ $ol.parent().remove(); $textInner.prepend($searchContainer); $textInner.append($table); $searchBtn.on("click", function(){/*K7>*/ var val = $input.val().toLowerCase().trim(); $tbody.find("tr").each(function(){/*K8>*/ var rowText = $(this).find("td:nth-child(2)").text().toLowerCase(); $(this).toggle(rowText.indexOf(val) !== -1); });/*K8<<*/ });/*K7<<*/ $resetBtn.on("click", function(){/*K9>*/ $input.val(''); $tbody.find("tr").show(); });/*K9<<*/ console.log("Tabella creata e ricerca abilitata"); })();/*K1<<*/ });/*K<<*/
</script>
...................................
ciao
.
@KolAsim: Thanks for this JavaScript code.
With three adjustments, it's also suitable for other websites.
My test page >> https://findelinks.de/123test-aufklappmenue-2/seite-durchsuchen-mit-javascript.html
Changes in code:
2x #imTextObject_3_01_tab0
1x <th>School Name</th>
The changes are marked in bold.
Here are some screenshots that might be helpful.
-----
----- (2) -----
-----
-----
Autore
Thanks @KolAsim and also explanation from @Daniel
I am sorry what must I change for School Name?
I try to put the script but nothing happens perhaps I put in the wrong position and is there another way that the text object contains list of numbering as it is without change into table object?
I am sorry that I really do not understand the content of the script, but just copy/paste.
https://ica.web.id/daftarsma.html
Although I have no JavaScript programming knowledge, only some HTML and CSS, I modified KolAsim's code and added some CSS code to the Text object.
Now it looks like a list, even though it's still a table in reality.
-----
----- JavaScript in objekt HTML code -----
<script>
/**--converte lista testo in tabella ed applica form di ricerca x WSx5 by KolAsim--**/
$( document ).ready(function() {/*K>*/ (function(){/*K1>*/ var $textInner = $("#imTextObject_46_04_tab0 .text-inner"); if($textInner.length === 0){/*K2>*/ console.warn("Nessun .text-inner trovato dentro #imTextObject_46_04_tab0"); return; }/*K2<<*/ var $ol = $textInner.find("ol").first(); if($ol.length === 0){/*K3>*/ console.warn("Nessun <ol> trovato dentro .text-inner"); return; }/*K3<<*/ if($("#schoolTable").length > 0){/*K4>*/ console.warn("Tabella già presente, esco"); return; }/*K4<<*/ var $lis = $ol.find("li"); if($lis.length === 0){/*K5>*/ console.warn("Nessun <li> trovato dentro <ol>"); return; }/*K5<<*/ var $searchContainer = $('<div style="margin-bottom:10px;"></div>'); var $input = $('<input type="text" id="tableSearch" placeholder="Inserisci nome scuola..." style="padding:5px; width:250px;">'); var $searchBtn = $('<button id="searchBtn" style="margin-left:10px; padding:5px;">Search</button>'); var $resetBtn = $('<button id="resetSearch" style="margin-left:5px; padding:5px;">Reset</button>'); $searchContainer.append($input, $searchBtn, $resetBtn); var $table = $('<table id="schoolTable" style="max-width:90%; border-collapse:collapse; cellpadding: 0; border-spacing: 0;"><tbody></tbody></table>'); var $tbody = $table.find("tbody"); $lis.each(function(i){/*K6>*/ var text = $(this).text(); var $tr = $('<tr></tr>'); $tr.append('<td style="text-align: right";>' + (i+1) + '.</td>'); $tr.append('<td>' + text + '</td>'); $tbody.append($tr); });/*K6>*/ $ol.parent().remove(); $textInner.prepend($searchContainer); $textInner.append($table); $searchBtn.on("click", function(){/*K7>*/ var val = $input.val().toLowerCase().trim(); $tbody.find("tr").each(function(){/*K8>*/ var rowText = $(this).find("td:nth-child(2)").text().toLowerCase(); $(this).toggle(rowText.indexOf(val) !== -1); });/*K8<<*/ });/*K7<<*/ $resetBtn.on("click", function(){/*K9>*/ $input.val(''); $tbody.find("tr").show(); });/*K9<<*/ console.log("Tabella creata e ricerca abilitata"); })();/*K1<<*/ });/*K<<*/
</script>
----- CSS in objekt Text at "Code" -----
th, td {
border: none !important;
}
-----
Autore
Do I copy/paste like this? I am sorry no knowlegde of script written
My number was 46_04
Your number was 3_01
The other users of the code have to adjust the numbers (which appear twice) for it to work.
The code I posted was for my HTML object, I forgot to change the numbers, here is the code for your HTML object.
-----
<script>
/**--converte lista testo in tabella ed applica form di ricerca x WSx5 by KolAsim--**/
$( document ).ready(function() {/*K>*/ (function(){/*K1>*/ var $textInner = $("#imTextObject_3_01_tab0 .text-inner"); if($textInner.length === 0){/*K2>*/ console.warn("Nessun .text-inner trovato dentro #imTextObject_3_01_tab0"); return; }/*K2<<*/ var $ol = $textInner.find("ol").first(); if($ol.length === 0){/*K3>*/ console.warn("Nessun <ol> trovato dentro .text-inner"); return; }/*K3<<*/ if($("#schoolTable").length > 0){/*K4>*/ console.warn("Tabella già presente, esco"); return; }/*K4<<*/ var $lis = $ol.find("li"); if($lis.length === 0){/*K5>*/ console.warn("Nessun <li> trovato dentro <ol>"); return; }/*K5<<*/ var $searchContainer = $('<div style="margin-bottom:10px;"></div>'); var $input = $('<input type="text" id="tableSearch" placeholder="Inserisci nome scuola..." style="padding:5px; width:250px;">'); var $searchBtn = $('<button id="searchBtn" style="margin-left:10px; padding:5px;">Search</button>'); var $resetBtn = $('<button id="resetSearch" style="margin-left:5px; padding:5px;">Reset</button>'); $searchContainer.append($input, $searchBtn, $resetBtn); var $table = $('<table id="schoolTable" style="max-width:90%; border-collapse:collapse; cellpadding: 0; border-spacing: 0;"><tbody></tbody></table>'); var $tbody = $table.find("tbody"); $lis.each(function(i){/*K6>*/ var text = $(this).text(); var $tr = $('<tr></tr>'); $tr.append('<td style="text-align: right";>' + (i+1) + '.</td>'); $tr.append('<td>' + text + '</td>'); $tbody.append($tr); });/*K6>*/ $ol.parent().remove(); $textInner.prepend($searchContainer); $textInner.append($table); $searchBtn.on("click", function(){/*K7>*/ var val = $input.val().toLowerCase().trim(); $tbody.find("tr").each(function(){/*K8>*/ var rowText = $(this).find("td:nth-child(2)").text().toLowerCase(); $(this).toggle(rowText.indexOf(val) !== -1); });/*K8<<*/ });/*K7<<*/ $resetBtn.on("click", function(){/*K9>*/ $input.val(''); $tbody.find("tr").show(); });/*K9<<*/ console.log("Tabella creata e ricerca abilitata"); })();/*K1<<*/ });/*K<<*/
</script>
IMPORTANT: Numbers vary from user to user and from text object to text object. If text objects are added to the same page, these text objects will receive different numbers.
Here, the numbers that need to be checked in the code and adjusted if necessary are marked in red; otherwise, the code will not work.
----- Screenshot -----
Autore
It works Daniel, thanks so much
https://ica.web.id/daftarsma.html
What about if the text object contents list numbering within Link showbox in each row
https://ica.web.id/daftarsma2.html
Then if remove the Reset button, only search box and search button, or the one search box only
Sorry wasting your time. Thanks anyway
Here, KolAsim's JavaScript code would have to be extended so that the additional text for the popup is read in and then the additional text plus the code for the popup can be output.
Since I have no JavaScript knowledge, I can't do this myself.
If KolAsim expands his code or the code I've modified, I could conduct further tests.
The code below shows the first text (bold) that needs to be read and then combined with the second text (bold) to create a link.
----- Code for link with text in bold and popup code (not ShowBox code) -----
<a role="button" href="javascript:x5engine.utils.popup({text: 'Aprikose und noch einige Inofs dazu.', graphics: false})" class="imCssLink" data-asw-org-font-size="16" style="font-size: 16px;">Aprikose</a>
If the reset button should be removed, then it would be good if KolAsim would remove it.
Autore
We are waiting for him, be patient
Autore
Yes I mean link to popup not showbox.
Then, Can the object text remain as is without any changes, such as having to convert it to a table? And the list has Links will remain as they are, whether they're pop-up links or links to other pages.
Autore
Yes I mean link to popup not showbox.
Then, Can the object text remain as is without any changes, such as having to convert it to a table? And the list has Links will remain as they are, whether they're pop-up links or links to other pages.
I won't be back online for about 12 hours.
Let's wait and see what code KolAsim provides.
Autore
Agree.. me too
Autore
https://ica.web.id/test.html
I got from AI. I actually just wanted to be able to find data directly from text objects in X5, the original data from a text object, whether in a paragraph or a data list (with a popup link or a link to another page in the X5 project).
However, it turned out to be not as easy as I imagined, directly connecting an HTML object to a text object in X5.
@Hanafi
If your need is to search a list, then you should consider a tool already made for that purpose.
Instead of ending up with a lot of work and something hard to maintain for yourself, you could put the data in a CSV file. It could be a file you export from a spreadsheet.
There are good tools for that. I could recommend : https://derekeder.github.io/csv-to-html-table/
You can see it used by Kosrae Power here: https://kosraepower.com/customer-info.html
You create the CSV file with data and then set up the tool to be used in an iframe like it is done in the Kosrae-example.
It is simple to use and yet it is a powerful tool.
Autore
I just want to apply whether it is possible to use search and highlight feature to read the data that I created in the text object available on the X5 website.. If there is and it can be applied, if not, it means I have to search and use another way.
The data I created is a list with a numbered sequence.. if there are more than 300 numbers/rows, it will be tiring to have to scroll down/up compared to using search and highlight.
CSV file can be one solution if there is no more way.
@John, Thanks for your suggestion and the web sample..
Autore
Thanks for the information
... Thank you, Daniel, for your participation and examples...
... for this >new LINK of yours, I propose my other invention that I mentioned >HERE, currently set to search only in text, ... including, not always, non-fragmented links(!)...
... here's the code:
<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>
.
ciao
.
.
Hey all,
The KolAsim's script is working as usual... No problem
But the result is exactly same as CTRL+F from the browser on the same page...
So why to re-invent the whell ????????? if the function is provides by the browser
I Missed something ????
Axel
Autore
Thank you so much @KolAsim, the script works excellent. Thank you
... I checked, you removed the navigation buttons, but that's fine too...
... Thanks to you too for appreciating it...
.
ciao
.
Autore
I am sorry I try learning to change some code in the script to adjust the viewpoint for smartphones.
Thanks to you, I can learn a little bit till understand little too. Thank you so much, the real script expert.
Autore
I mean remove.. I can not change because no knowledge about code
...you're right to do your own testing and modify it to suit your needs...
...my codes are my original and exclusive inventions, but they're also free to use and customize. You can also remove the comments referring to "by KolAsim"...
...the only ethical thing is to not take ownership of them, and if you share them, please acknowledge their authorship, that's all...
...bye, and have fun with the modifications...
.
Autore
I never want to delete the comments referring to "by KolAsim".. Let me always remember your help. I certainly uphold the ethics of ownership..
Once again, thank you and express my deepest appreciation for all your help.
Autore
I am sorry, may ask how to resize the search box, I could not find the code
...I thought you knew, even if it works, you could have inserted the code for that page in Step 3 | Page Properties | Code | Expert | Before the closing /HEAD tag...
...still in this section, to avoid altering the code and to shorten the width of the search field, paste this simple string after any existing code:
<style>#searchTerm{width:80px!important}</style>
.
ciao
.
@KolAsim:
I noticed that you can only enter the search term once and then search or continue searching.
If you want to change the word and search, you have to reload the page using the F5 key for it to work.
Test page >> https://findelinks.de/123test-aufklappmenue-2/seite-durchsuchen-mit-js-teil-2.html
----- (1) Search for the first time -----
----- (2) Search with a change or addition -----
... I did some testing and it worked with several searches, maybe I didn't understand...
... I forgot a translation in the code; word "di" instead of "of":
$('#status').text(`Result ${current + 1} di ${matches.length}`);
V
$('#status').text(`Result ${current + 1} of ${matches.length}`);
.
ciao
.
I replaced "di" with "of" in the code, but the search behavior didn't change.
I type "ap" into the search and get a result (screenshot 1). Then I expand the search to "apf" and get no more results (screenshot 2).
----- (1) -----
----- (2) -----
If I type cra and then delete and type gra, it works.
But not if I type "ap" and change it to apf, then it doesn't work.
But if I change ha to he or hi, then it works too.
fe ---> Apfel und granatapfel, but not Feige.
Now it suddenly works - very strange.
I now have a note about the F5 key on my test page.
-----
... Hi Daniel, I did your tests, and it actually crashes in some cases...
... perhaps a refresh/reload check could be applied when no results are retrieved...
... it's just a guess, and it needs to be programmed and tested elsewhere...
.
ciao
.