From f97b6507283007c7fbebca8696c7acca65c7435b Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Sat, 23 Nov 2024 11:43:08 +0530
Subject: [PATCH] Fix search functionality bug on blog page

---
 blog.html | 88 ++++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 17 deletions(-)

diff --git a/blog.html b/blog.html
index e6a2f5ea..acfbca75 100644
--- a/blog.html
+++ b/blog.html
@@ -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>
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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>