into your browser :  CTRL + F 

no ?

I am sorry.. it is not what I mean

I mean that only one row display and its on top

...try this code of mine, derived from the previous one, blindly (!); if it doesn't work for you, forget it, bye...

<script>
$(document).ready(function () {
/** -- cerca in tabella x WSx5 by KolAsim -- **/
const targetContainer = $("#imTableObject_39_01");
//-------------------K---------------------------
const table = targetContainer.find("table"); const tbody = table.find("tbody"); const searchBox = $(` <div id="dynamicSearchBar" style="margin-bottom:10px; text-align:left;"> <input type="text" id="searchInput_dyn" placeholder="Cerca..."> <button id="prevBtn_dyn"> ◄ </button> <button id="nextBtn_dyn"> ► </button> <button id="resetBtn_dyn">Reset</button> <span id="resultCount" style="margin-left:10px;"></span> </div> `); targetContainer.prepend(searchBox); $("head").append(` <style> .highlightMatch { background: yellow; padding: 0 2px; } .highlightCurrent { background: orange !important; padding: 0 2px; } </style> `); function removeHighlight() { tbody.find(".highlightMatch, .highlightCurrent").each(function () { $(this).replaceWith($(this).text()); }); } function highlight(text) { if (!text) return; const escaped = text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); const pattern = new RegExp("(" + escaped + ")", "gi"); tbody.find("td").each(function () { const original = $(this).text(); if (pattern.test(original)) { const newHtml = original.replace(pattern, `<span class="highlightMatch">$1</span>`); $(this).html(newHtml); } }); } let currentIndex = -1; function updateCounter() { const matches = tbody.find(".highlightMatch, .highlightCurrent"); if (matches.length === 0) { $("#resultCount").text("Risultati: 0 / 0"); } else { $("#resultCount").text(`Risultati: ${currentIndex + 1} / ${matches.length}`); } } function gotoMatch(next = true) { const matches = tbody.find(".highlightMatch, .highlightCurrent"); if (matches.length === 0) return; matches.removeClass("highlightCurrent").addClass("highlightMatch"); if (next) { currentIndex++; if (currentIndex >= matches.length) currentIndex = 0; } else { currentIndex--; if (currentIndex < 0) currentIndex = matches.length - 1; } const $current = $(matches[currentIndex]); $current.removeClass("highlightMatch").addClass("highlightCurrent"); $('html, body').animate({ scrollTop: $current.offset().top - 100 }, 300); updateCounter(); } $("#searchInput_dyn").on("input", function () { const filter = $(this).val().toLowerCase(); removeHighlight(); currentIndex = -1; if (filter === "") { updateCounter(); return; } highlight(filter); gotoMatch(true); }); $("#nextBtn_dyn").on("click", function () { gotoMatch(true); }); $("#prevBtn_dyn").on("click", function () { gotoMatch(false); }); $("#resetBtn_dyn").on("click", function () { $("#searchInput_dyn").val(""); removeHighlight(); currentIndex = -1; updateCounter(); }); });/**K**/
</script>

.

Thanks @KolAsim, the script works as usual and can find each data I am looking for by highlighted word.

Actually what I want that the results display each row whose data is found, while other data that is not searched does not appear.

Anyway, Thank you so much for always providing solutions.

I am so sorry @KolAsim, I mean filter table.. I am wrong explanation, please forgive me..

I found here :

https://www.w3schools.com/howto/howto_js_filter_table.asp

But can not apply the script how to put for TableObject on X5..  

Thanks to give the solution before for search and filter data on TextObject X5.. 

https://ica.web.id/daftarsma.html

I am still waiting for TableObject X5 applied..

Thanks @KolAsim 

The code from w3schools.com works with the "Table" object in WebSite X5, but only 1 column is searched. If several columns are to be searched, a Javascript expert, e.g. KolAsim, would have to adapt the code or offer Javascript code themselves.

My test page >> https://findelinks.de/123test-aufklappmenue-2/suche-in-tabelle.html

@Daniel, the test page you created is great, only the column header titles are still not displayed..

Would you mind providing the script here?

While waiting for @KolAsim.. would have to adapt the code or offer Javascript code themselves, to make it perfect.

Thanks @Daniel..

I try to make one sample table follow the script using HTML code Object, but I do not understand where I put a TableObject website X5 code inside the script..

https://ica.web.id/filtertab.html

2 Screenshots below.

Objects in the grid and their contents:

1)a) Insert in the first HTML code objekt at "HTML code" this code only:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Suche nach Früchten ...">

   b) Insert in the first HTML code objekt at "Extended" the complete CSS code from ...

>>> https://www.w3schools.com/howto/howto_js_filter_table.asp

       ("Extended" could be called differently in the English version)

2) Here are die table objekt from WebSite X5

3) Insert in the second HTML code objekt the Javascript code complete (> w3schools.com)

Changed this line in Javascript (The numbers vary from user to user, so be sure to adjust!)

table = document.getElementById("imTableObject_71_03");

-----

-----

Adjust the 7th line in the code, the rest stays as it is.

Mark the table object in the grid and click on "Code" at the top, then you will see the object ID on the right, insert it as shown in the code below.

----- Javascript code -----

<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("imTableObject_71_03");
tr = table.getElementsByTagName("tr");

// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

Yes Daniel, I follow your instruction, it works.. 

https://ica.web.id/daftartel.html

The one thing is that it still can't display the header row, hope @KolAsim will help or by using his own script.

Anyway, thanks so much @Daniel

Change in this code the placholder text in your langage and your search.

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Suche nach Früchten ...">

Which header row do you mean?

Upon request, KolAsim may be able to provide additional functions that I, as a non-expert, cannot do.

@KolAsim:

I didn't use your code because I had big problems with it twice, but the code from w3schools.com.

On my test site I had adjusted the code, but I could only search 1 table column with it.

Now I have expanded a line of code so that all 3 table columns are searched, but the JavaScript does not find all text fragments in the search in the table.

Is this a quirk in javascript or a bug in my changed code?

My test page after change, see

>> https://findelinks.de/123test-aufklappmenue-2/suche-in-tabelle.html

.

---- Javascript code line before -----

td = tr[i].getElementsByTagName("td")[0];

---- Javascript Code line after -----

td = tr[i].getElementsByTagName("td")[0] && tr[i].getElementsByTagName("td")[1] && tr[i].getElementsByTagName("td")[2];

@Daniel,

I mean row contained title in each column.  I accidentally changed this value to 1 and the row header appears.

https://ica.web.id/daftartel2.html

Thank you so much for your help..

@KolAsim,

The script works well and complete with search and reset buttons

https://ica.web.id/daftartel.html

Thanks lots.. I never forget all your help

Thanks, now I understand it and changed it on my test site too.

I have almost no knowledge of Javascript, only some basic knowledge of PHP, as I worked with PHP as a hobby for about a year in 2007.

I am sorry @KolAsim, one more.. how to make the row header appear for the search result.. what code should be changed or replaced in the script..

@Daniel.. Great PHP specialist, since 2007.. so long.

One more Daniel need your help,

I can not applied for filter using TextObject websiteX5 contained list, it doesn't work.. but for TableObject websiteX5 well done as your instruction.. 

https://ica.web.id/listfilter.html

Maybe I am wrong to put ID code for TextObject X5

I only worked with PHP for about 15 months in 2006/2007, but then had to stop because it became too much for my head.

Back to the code.

• The code from w3schools and KolAsim was written specifically for the HTML tables that are also used by the WebSite X5 table object.
• The code from w3schools and KolAsim is not suitable for the Text object of WebSite X5, even if you design the text to look like a table.

KolAsim has other scripts to search in the text object, but I don't have a list of KolAsim's posts and codes.

Addendum: I removed the table and the Javascript code from my test site because the code from w3schools did not work without errors.

Is the code in the screenshot also from w3schools?

But I follow the code from w3schools.. not Filter Table but Filter List.. I guess for the list the same as document like Text Object of WebsiteX5

https://www.w3schools.com/howto/howto_js_filter_lists.asp

Anyway.. thanks for your explanation @Daniel

For this w3schools code you need 1 HTML object for all codes otherwise it won't work.

The text must then be written as HTML list code, i.e. without the functions of the text object.

This means that everything that is not in the list can be designed with text objects at the top and bottom.

.

----- HTML code objekt -----

Tab "Advanced":

Insert the CSS code

Tab "Advanced":

Insert the HTML code

Insert the Javascript code

-------------------------------

That would be option 1, but I'm also trying to make it easier.

You mean Tab "Expert" ?

Then insert HTM+JS code

I have the German version of WebSie X5, I think the English version is called "Expert".

The 2nd option didn't work, so it's stuck with option 1 for now, unless KolAsim offers a Javascript code.

My test page > https://findelinks.de/123test-aufklappmenue-2/textsuche-auf-der-seite.html

If you want the list to be left-aligned, then in this section add a line with text-align: left; add.

-----

#myUL {
/* Remove default list styling */
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
}

-----

It doesn't work, perhaps I do mistake?

Don´t change the Javascript Code.

-----

"Expert" only for CSS.

"HTML Code" first HTML, then Javascript.

My test page > https://ica.web.id/listfilter2.html

The search box does not appear

CSS Code on Tab Expert

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Suche nach Früchten ...">
<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("imTextObject_44_03");
li = ul.getElementsByTagName('li');

// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>

Owh.. it means that we can not put the TextObject of WebsiteX5 but TableObject of WebsiteX5 can be applied for the script Filter table before

I had planned the text object as option 2, but it didn't work, but I can test it again later when I know where the error was.

---- Wrong -----

ul = document.getElementById("imTextObject_44_03");

---- Correct -----

ul = document.getElementById("myUL");

This is the CSS code für "Experts" in the HTML Code objekt:

#myInput {
  background-image: url('/css/searchicon.png');/* Add a search icon to input */
  background-position: 10px 12px;/* Position the search icon */
  background-repeat: no-repeat;/* Do not repeat the icon image */
  width: 100%;/* Full-width */
  font-size: 16px;/* Increase font-size */
  padding: 12px 20px 12px 40px;/* Add some padding */
  border: 1px solid #ddd;/* Add a grey border */
  margin-bottom: 12px;/* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;/* Add a border to all links */
  margin-top: -1px;/* Prevent double borders */
  background-color: #f6f6f6;/* Grey background color */
  padding: 12px;/* Add some padding */
  text-decoration: none;/* Remove default text underline */
  font-size: 18px;/* Increase the font-size */
  color: black;/* Add a black text color */
  display: block;/* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #eee;/* Add a hover effect to all links, except for headers */
}

Ok I understand.. Thanks @Daniel