The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Search on HTML

3 posters

Go down

Solved Search on HTML

Post by Sir Chivas™ May 12th 2023, 6:13 am

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


Last edited by Sir Chivas™ on May 12th 2023, 3:19 pm; edited 1 time in total
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Search on HTML

Post by Razor12345 May 12th 2023, 3:04 pm

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
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1594
Reputation : 270
Language : Ukr, Rus, Eng
Location : Ukraine

Sir Chivas™ likes this post

Back to top Go down

Solved Re: Search on HTML

Post by Sir Chivas™ May 12th 2023, 3:19 pm

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. Very good
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Search on HTML

Post by SLGray May 12th 2023, 9:31 pm

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


Search on HTML Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51608
Reputation : 3529
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum