Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix search functionality bug on blog page #3333

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix search functionality bug on blog page #3333

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 71 additions & 17 deletions blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -638,9 +638,8 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
onclick="window.location.href='/addBlog.html'">Add Blog</button>
</div>
<div class="col-lg-8 col-md-10">
<form class="search-bar" id="search-form">
<input type="text" id="search-input" class="form-control" placeholder="Search for blog posts..."
aria-label="Search" required>
<form class="search-bar" id="search-form" onsubmit="return false;">
<input type="search" id="search-input" class="form-control" placeholder="Search for blog posts..." aria-label="Search" required>
</form>
</div>
</div>
Expand Down Expand Up @@ -859,7 +858,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
<section id="blog" class="blog-area pt-100">
<div class="container">
<div class="row justify-content-start" >
<div class="col-lg-4 col-md-7" data-aos="slide-right">
<div class="col-lg-4 col-md-7" data-aos="slide-right" data-blog-title="How to deal with Unknown Risks in Life and Investing?">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
<div class="blog-image">
<a href="./blogs/how-to-deal-with-unknown-risks-in-life-and-investing.html">
Expand All @@ -878,7 +877,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="zoom-in">
<div class="col-lg-4 col-md-7" data-aos="zoom-in" data-blog-title="How to 10x your Generational Wealth?">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/how-to-10x-your-generational-wealth.html">
Expand All @@ -893,7 +892,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-left">
<div class="col-lg-4 col-md-7" data-aos="slide-left" data-blog-title=" Investing with Minimal Savings: A Guide for Women Investors">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/invest-minimal.html">
Expand All @@ -912,7 +911,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-right">
<div class="col-lg-4 col-md-7" data-aos="slide-right"data-blog-title=" Can Pocket Money Turn Into Investment? A Guide for Teenagers">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/Pocketmoney.html">
Expand All @@ -929,7 +928,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="zoom-in">
<div class="col-lg-4 col-md-7" data-aos="zoom-in" data-blog-title="Investment Opportunities for Senior Citizens: Securing Your Future" >
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/senior.html">
Expand All @@ -946,7 +945,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-left">
<div class="col-lg-4 col-md-7" data-aos="slide-left" data-blog-title="Why investing in stocks is better than fixed deposit?">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/why-investing-in-stocks-is-better-than-fixed-deposit.html">
Expand All @@ -963,7 +962,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-right">
<div class="col-lg-4 col-md-7" data-aos="slide-right" data-blog-title="Unlocking Potential: The Benefits and Opportunities of Investing in Startups">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="/blogs/starup.html">
Expand All @@ -980,7 +979,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="zoom-in">
<div class="col-lg-4 col-md-7" data-aos="zoom-in" data-blog-title=" How Fintech is Revolutionizing Small Business Lending.">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/how-fintech-is-revolutionizing-small-business-lending.html">
Expand All @@ -997,7 +996,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-left">
<div class="col-lg-4 col-md-7" data-aos="slide-left" data-blog-title="Economic Trends and Analysis.">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/economic-trends-and-analysis.html">
Expand All @@ -1014,7 +1013,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-right">
<div class="col-lg-4 col-md-7" data-aos="slide-right" data-blog-title=" Empowering you with economic knowledge for smarter decisions.">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/empowering-you-with-economic-knowledge-for-smarter-decisions.html">
Expand All @@ -1031,7 +1030,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="zoom-in">
<div class="col-lg-4 col-md-7" data-aos="zoom-in" data-blog-title="Mutual Funds 101: A Beginner’s Guide to Smart Investing">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/Mutual-Funds-101-A-Beginners-Guide-to-Smart-Investing.html">
Expand All @@ -1050,7 +1049,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-left">
<div class="col-lg-4 col-md-7" data-aos="slide-left" data-blog-title=" Saving for the Future.">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/saving-for-future.html">
Expand All @@ -1067,7 +1066,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-right">
<div class="col-lg-4 col-md-7" data-aos="slide-right" data-blog-title="Real Estate Economics">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/real-estate-economics.html">
Expand All @@ -1084,7 +1083,7 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
</div>
</div>
</div>
<div class="col-lg-4 col-md-7" data-aos="slide-left">
<div class="col-lg-4 col-md-7" data-aos="slide-left" data-blog-title="Types of Stock Investment: A Quick Guide">
<div class="single-blog mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="blog-image">
<a href="./blogs/Types-of-Stock-Investments-A-Quick-Guide.html">
Expand Down Expand Up @@ -1461,6 +1460,61 @@ <h4 class="title custom-margin">Contact Us</h4>
</script>


<script>
document.getElementById("search-input").addEventListener("input", function () {
let searchQuery = this.value.toLowerCase();
let blogCards = document.querySelectorAll(".col-lg-4.col-md-7");

console.log("Search Query: ", searchQuery);


blogCards.forEach(function (card) {
console.log("Disabling AOS for card:", card);
card.setAttribute("data-aos", "none");
});

let resultsVisible = false;

blogCards.forEach(function (card) {
let title = card.getAttribute("data-blog-title");
console.log("Checking card title:", title);

if (title) {
title = title.toLowerCase();
if (title.includes(searchQuery)) {
card.style.display = "block";
console.log("Card matches search query, showing:", title);
resultsVisible = true;
} else {
card.style.display = "none";
console.log("Card does not match, hiding:", title);
}
} else {
console.log("No data-blog-title found for card");
}
});


if (resultsVisible) {
console.log("Results visible, re-enabling AOS");
setTimeout(function () {
blogCards.forEach(function (card) {
if (card.style.display === "block") {
console.log("Re-enabling AOS for card:", card);
card.setAttribute("data-aos", card.dataset.aos);
}
});
AOS.refresh();
console.log("AOS refreshed after results are displayed");
}, 100);
} else {
console.log("No results found, refreshing AOS");
AOS.refresh();
}
});
</script>


</body>

</head>
Expand Down