Add suggestions to search bar (Landing)

html/partials/header.ejs

@@ -31,10 +31,7 @@
             </a>
         </div>
         <div class="header-center">
-            <form action="/search">
+            <%- include('./search.ejs') %>
-                <input/ class="search-bar" autocomplete="on" id="fname" name="query" data-ddg-inputtype="identities.firstName">
-                <button><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M17 17L21 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
-            </form>
         </div>
         <div class="header-end">
             <a href="https://codeberg.org/Ashley/poketube/src/branch/main/instances.json"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M6 18.01L6.01 17.9989" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M6 6.01L6.01 5.99889" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M2 9.4V2.6C2 2.26863 2.26863 2 2.6 2H21.4C21.7314 2 22 2.26863 22 2.6V9.4C22 9.73137 21.7314 10 21.4 10H2.6C2.26863 10 2 9.73137 2 9.4Z" stroke="#ffffff" stroke-width="1.5" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M2 21.4V14.6C2 14.2686 2.26863 14 2.6 14H21.4C21.7314 14 22 14.2686 22 14.6V21.4C22 21.7314 21.7314 22 21.4 22H2.6C2.26863 22 2 21.7314 2 21.4Z" stroke="#ffffff" stroke-width="1.5" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg></a>
@@ -122,4 +119,5 @@
         color: white;
         gap: 6px;
     }
-</style> <link href="<%- proxyurl %>/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" rel=stylesheet>
+</style>
+<link href="<%- proxyurl %>/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" rel=stylesheet>

html/partials/search.ejs

@@ -0,0 +1,88 @@
+<form action="/search">
+    <input autocomplete="off" type="search" class="search-bar" id="fname" name="query">
+    <button><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M17 17L21 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
+</form>
+<div style="opacity: 0;" class="suggestions"></div>
+<script>
+/*    
+@licstart  The following is the entire license notice for the 
+JavaScript code in this page.
+
+Copyright (C) 2024 SudoVanilla
+
+The JavaScript code in this page is free software: you can
+redistribute it and/or modify it under the terms of the GNU
+General Public License (GNU GPL) as published by the Free Software
+Foundation, either version 3 of the License, or (at your option)
+any later version.  The code is distributed WITHOUT ANY WARRANTY;
+without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+
+As additional permission under GNU GPL version 3 section 7, you
+may distribute non-source (e.g., minimized or compacted) forms of
+that code without the copy of the GNU GPL normally required by
+section 4, provided you include this license notice and a URL
+through which recipients can access the Corresponding Source.   
+
+
+@licend  The above is the entire license notice
+for the JavaScript code in this page.
+*/
+
+// Dismiss when the end-user clicks else where
+document.body.addEventListener("click", function (evt) {
+    document.querySelector('.suggestions').style.opacity = '0'
+});
+
+// When the end-user starts typing, trigget the fetch function
+document.querySelector('input[type="search"]').addEventListener('input', function(e) {
+    if (e.target.value !== '') {
+        document.querySelector('.suggestions').style.opacity = '1'
+        GetResults()
+    }
+    else {null}
+});
+
+// Fetch
+function GetResults() {
+    var SearchValue = document.querySelector('input[type="search"]').value
+    var YouTubeSuggestions = document.querySelector('.suggestions')
+    fetch(`https://yt.sudovanilla.org/api/v1/search/suggestions?q=${SearchValue}`)
+    .then(response => response.json())
+    .then(data => {YouTubeSuggestions.innerHTML = ListOfSuggestionsYT(data)})
+}
+
+// Create List
+function ListOfSuggestionsYT(data) {
+    const text = data.suggestions.map(data => `<a href="/search?query=${data}">${data}</a>`).join("\n")
+    return `${text}`
+}
+
+</script>
+
+<style>
+    
+.suggestions {
+    position: absolute;
+    display: grid;
+    background: #473e46d6;
+    border-radius: 6px;
+    margin-top: 10px;
+    width: 329px;
+    z-index: 5;
+    backdrop-filter: blur(10px);
+    gap: 4px;
+    padding: 4px 0px;
+}
+.suggestions a {
+  color: white;
+  background: transparent;
+  padding: 6px 12px;
+  border-radius: 4px;
+  margin: 0px 4px;
+}
+.suggestions a:hover {
+    background: #f9f9f917;
+    text-decoration: none;
+}
+</style>