(feat): implemented basic search result fetching ajax logic

htdocs/assets/_floatingbar.php

@@ -1,6 +1,6 @@
 <div id="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] hidden"></div>
 <div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-y-scroll no-scrollbar hidden">
-    <div class="defresults w-full flex flex-col justify-start px-2 mt-1">
+    <div id="defresults" class="defresults w-full flex flex-col justify-start px-2 mt-1">
         <p class="text-xs text-accent_three mt-3 mb-2 mx-1">PAGE SHOTCUTS</p>
         <div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg" onclick="location.href='<?php echo $basePath ?>'">
             <span class="flex items-center">
@@ -68,7 +68,7 @@
             </span>
         </div>
     </div>
-    <div class="searchresults w-full flex flex-col justify-start px-2 mt-1">
+    <div id="searchresults" class="searchresults w-full flex-col justify-start px-2 mt-1 hidden">
         <p class="text-xs text-accent_three mt-3 mb-2 mx-1">SEARCH RESULTS</p>
         <div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg" onclick="location.href='<?php echo $basePath ?>'">
             <span class="flex items-center">

htdocs/assets/js/floatingbar-config.js

@@ -7,6 +7,8 @@ const searchTxt = document.getElementById("searchtext");
 const searchInput = document.getElementById("searchinput");
 const windowWrapper = document.getElementById("floatingwindowwrapper");
 const searchWin = document.getElementById("searchwindow");
+const searchDef = document.getElementById("defresults");
+const searchRes = document.getElementById("searchresults");
 let lastScrollTop = 0;
 
 window.addEventListener("scroll", function () {
@@ -84,3 +86,44 @@ document.addEventListener("keydown", function(event) {
     }
 });
 
+//---controls search window results
+function perform_search(searchInput, searchDef, searchRes) {
+    searchDef.classList.remove("flex");
+    searchDef.classList.add("hidden");
+    searchRes.classList.remove("hidden");
+    searchRes.classList.add("flex");
+    let searchString = searchInput.value;
+
+    $.ajax({
+        url: 'core/handle_search.php',
+        type: 'POST',
+        dataType: 'json',
+        data: { keyword: searchString },
+        success: function(response) {
+            console.log("success");
+            console.log(response);
+        },
+        error: function(error) {
+            console.error('error:', error);
+        },
+        complete: function() {
+            console.log("completed");
+        }
+    });
+}
+
+function fallback_search(searchDef, searchRes) {
+    searchDef.classList.remove("hidden");
+    searchDef.classList.add("flex");
+    searchRes.classList.remove("flex");
+    searchRes.classList.add("hidden");
+}
+
+searchInput.addEventListener('input', function() {
+    if (searchInput.value != "") {
+        perform_search(searchInput, searchDef, searchRes);
+    }
+    else {
+        fallback_search(searchDef, searchRes);
+    }
+});

htdocs/assets/style.css

@@ -1160,10 +1160,6 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
-.bg-\[rgba\(54\2c _255\2c _135\2c _0\.55\)\] {
-  background-color: rgba(54, 255, 135, 0.55);
-}
-
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1235,11 +1231,21 @@ video {
   padding-right: 0.40rem;
 }
 
+.px-\[0\.65rem\] {
+  padding-left: 0.65rem;
+  padding-right: 0.65rem;
+}
+
 .px-\[0\.80rem\] {
   padding-left: 0.80rem;
   padding-right: 0.80rem;
 }
 
+.px-\[1rem\] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1255,6 +1261,11 @@ video {
   padding-bottom: 1.25rem;
 }
 
+.py-\[0\.05rem\] {
+  padding-top: 0.05rem;
+  padding-bottom: 0.05rem;
+}
+
 .py-\[0\.10rem\] {
   padding-top: 0.10rem;
   padding-bottom: 0.10rem;
@@ -1270,31 +1281,6 @@ video {
   padding-bottom: 0.30rem;
 }
 
-.px-\[1rem\] {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.py-\[0\.05rem\] {
-  padding-top: 0.05rem;
-  padding-bottom: 0.05rem;
-}
-
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-\[0\.70rem\] {
-  padding-left: 0.70rem;
-  padding-right: 0.70rem;
-}
-
-.px-\[0\.65rem\] {
-  padding-left: 0.65rem;
-  padding-right: 0.65rem;
-}
-
 .text-center {
   text-align: center;
 }

htdocs/core/handle_search.php

@@ -0,0 +1,11 @@
+<?php
+require 'connection.php';
+require 'query_functions.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    if (isset($_POST['keyword'])) {
+        $keyword = $_POST['keyword'];
+        echo json_encode(array("keyword-recived" => $keyword));
+    }
+}
+?>