Search on HTML

So, I'm working on a HTML page where it shows a list of forums, websites, blogs, etc... as a Link Directory. So far I have 6 pages. Each have their own search bar to search within the list display on the same page. Anyways, my question is, is it possible to have the first search bar be able to gather the information from the other 5 pages while searching.



URL: https://sirchivas.forumotion.com/h4-computer-internet-links

Here are the codes I'm currently using:

Code:

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Title on this page only.." title="Type in a name" />

Code:

#myInput {
  background-image: url('https://i.servimg.com/u/f96/18/89/87/02/17254610.png');
  background-size: 25px 25px;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

Code:

 <script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  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>

If you can guide me to what it needs, I can try to figure it out myself. Thank you.

Good afternoon!

First of all, I would like to clarify the use of the tbody tag. You are using this tag incorrectly.

Code:

<tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody>  </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
   <tr style="">
                                                                         
      <td>
                                         Title3                             
      </td>
                                                                         
      <td>
                                       <a class="button" style="font-weight:normal;color: white;border-radius: 3px;padding: 6px;background: #e4cc0f;"><span><span>Blog</span></span></a>                               
      </td>
                                                                       
   </tr>

This tag must be used once per table and contain the body of the table. Adjust your code as there may be problems with indexing in the future.

Secondly, I would like to remind you that the maximum length of an HTML page is 65,000 characters. As you have 7 html pages - each one needs to be processed and data from these pages needs to be downloaded. This takes a lot of characters. I recommend reducing the number of HTML pages.

My version has 3 HTML pages. The first page loads the data when you open the HTML page and the filter conditions. The 2nd and 3rd HTML pages are the code pages I took from you.
I used Info/Title (for the first page), Info2/Title2 (for the second page), Info3/Title3 (for the third page) for clarity.

My version of the code for the first page (I added comments):

Code:

 <script>

var listOfElements = []; //create a global variable to store data from page 2
var listOfElements2 = []; //create a global variable to store data from page 3

window.addEventListener('load', function() {  // Loading data when opening an HTML page

$.ajax({  // Loading data from 2 HTML page
        url: 'https://testtesttest.forumotion.me/h2-22222', //Link on 2 HTML page
                  method: "GET",        //How to interact with the HTML page
                  data: 'tr',           
        dataType: "html",    //the format of the data I expect to receive
        success: function (data) { //if the data is successfully loaded, I store it in one of the global variables
                    let div = document.createElement('div');
                    div.innerHTML = data;
                 let elements = div.querySelectorAll('table#myTable tbody tr');
            for (let i = 0; i < elements.length; i++) {
         let td = elements[i].getElementsByTagName("td")[0];
         if (td && ((td.textContent || td.innerText).toUpperCase().indexOf(document.getElementById("myInput").value.toUpperCase()) > -1)) {
            listOfElements.push(elements[i]);
         }
          }

          return listOfElements;
        }
});

  $.ajax({ // Loading data from 3 HTML page
                  url: 'https://testtesttest.forumotion.me/h3-33333',
                  method: "GET",       
                  data: 'tr',   
                  dataType: "html",   
                  success: function (data) {
                    let div = document.createElement('div');
                    div.innerHTML = data;
                 let elements = div.querySelectorAll('table#myTable tbody tr');
            for (let i = 0; i < elements.length; i++) {
         let td = elements[i].getElementsByTagName("td")[0];
         if (td && ((td.textContent || td.innerText).toUpperCase().indexOf(document.getElementById("myInput").value.toUpperCase()) > -1)) {
            listOfElements2.push(elements[i]);
         }
          }

          return listOfElements2;
        }
});
});


function myFunction() {
  var input = document.getElementById("myInput");
  var filter = input.value.toUpperCase();
  var table = document.getElementById("myTable");
  var tr = table.getElementsByTagName("tr");


  for (let i = 0; i < tr.length; i++) {
    let td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      let txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }     
  }
// I add data from pages 2 and 3 that match the filter conditions
listOfElements.forEach(function (item) {
           table.insertAdjacentElement('beforeend', item);
});
listOfElements2.forEach(function (item) {
           table.insertAdjacentElement('beforeend', item);
          });

}

</script>


You can see it live here: https://testtesttest.forumotion.me/h1-11111 (it's first HTML page).

Second HTML page: https://testtesttest.forumotion.me/h2-22222
Third HTML page: https://testtesttest.forumotion.me/h3-33333

Also note that the search results will not be paginated - they will all be on one page

Hi Razor! Thank you very much for the fast respond.


I am aware of the error that its in use of the tbody tag. For some strange reason when I have a lot of tabs opened and I continuously preview the code it glitches and it either duplicates tags, creates tags or adds bold tags in random spots, bbcode. I will fix that, I'm still not finished with the code itself.

I was afraid that it had to be processed and data from these pages needed to be downloaded. Unfortunately, I am not trying to make the page that long in scrolling, 20 entries is fine. I shall leave it as it is. Thank you for your time and effort in giving me a secondary option.