Search on HTML
3 posters
Page 1 of 1
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:
If you can guide me to what it needs, I can try to figure it out myself. Thank you.
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.
Last edited by Sir Chivas™ on May 12th 2023, 3:19 pm; edited 1 time in total
Re: Search on HTML
Good afternoon!
First of all, I would like to clarify the use of the tbody tag. You are using this tag incorrectly.
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):
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
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- Support Moderator
- Posts : 1594
Reputation : 270
Language : Ukr, Rus, Eng
Location : Ukraine
Sir Chivas™ likes this post
Re: Search on HTML
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.
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.
Re: Search on HTML
Problem solved & topic archived.
|
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» What is the search html code (Need Help)
» What is the HTML code for search site
» Neither search nor advanced search works. How to solve?
» How do I remove "Search Google" from "Advanced Search"?
» Any way to replace the search tab with an actual search bar? SOLVED
» What is the HTML code for search site
» Neither search nor advanced search works. How to solve?
» How do I remove "Search Google" from "Advanced Search"?
» Any way to replace the search tab with an actual search bar? SOLVED
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum