From 2defe8a4bdbf3596c52c4a7725e6d21b13cfa848 Mon Sep 17 00:00:00 2001
From: david <david@muxi.at>
Date: Sat, 20 May 2023 02:57:30 +0200
Subject: [PATCH] Search works

---
 core/templates/base.html            | 14 +++----
 static/dist/js/searchsuggestions.js | 64 ++++++++++++-----------------
 2 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/core/templates/base.html b/core/templates/base.html
index 2f70854..18ba5dd 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -51,17 +51,17 @@
             </ul>
             <div class="float-right" style="width:100%">
 
-<!--
-                  <div id="searchsuggestions"></div>
-              <select class="select2" style="width: 200px;"></select>
--->
-
               <form class="form-inline ml-0 ml-md-3 float-right">
                 <div class="input-group input-group-sm">
-                  <input class="form-control form-control-navbar"
+                  <input class="form-control form-control-navbar" data-toggle="dropdown"
                          type="search"
                          placeholder="Search"
-                         aria-label="Search">
+                         aria-label="Search"
+                         autocomplete="off"
+                         id="search">
+                  <ul class="dropdown-menu" id="searchdropdown">
+                    <li><span class="dropdown-item-text">Nothing</span></li>
+                  </ul>
                   <div class="input-group-append">
                     <button class="btn btn-navbar" type="submit">
                       <i class="fas fa-search"></i>
diff --git a/static/dist/js/searchsuggestions.js b/static/dist/js/searchsuggestions.js
index 433677d..1199061 100644
--- a/static/dist/js/searchsuggestions.js
+++ b/static/dist/js/searchsuggestions.js
@@ -1,50 +1,38 @@
-$(document).ready(() => {
-});
-
-/*
-const searchinput = document.querySelector("#searchinput");
-const searchsuggestions = document.querySelector("#searchsuggestions");
+const searchinput = document.querySelector("#search");
+const searchsuggestions = document.querySelector("#searchdropdown");
 searchinput.addEventListener("input", (e) => {
     q(e.target.value);
 });
 async function q(s) {
-    try {
-        const response = await fetch("/api/?q=" + s);
-        const result = await response.json();
-        console.log("Success: " + JSON.stringify(result));
-        setSuggestions(searchsuggestions, result);
-    } catch(error) {
-        console.log("Error: " + error);
+    if (s.length < 1) {clearSuggestions(searchsuggestions)}
+    else {
+        try {
+            const response = await fetch("/api/search/?q=" + s);
+            const result = await response.json();
+            setSuggestions(searchsuggestions, result);
+        } catch(error) {
+            console.log("Error: " + error);
+        }
     }
 }
+function clearSuggestions(o) {
+    const span = document.createElement("span");
+    span.setAttribute("class", "dropdown-item-text");
+    span.insertAdjacentText("afterbegin", "Nothing");
+    const li = document.createElement("li");
+    li.appendChild(span);
+    o.replaceChildren(li);
+}
 function setSuggestions(o, s) {
     const newSuggestions = [];
     for (const vid of s) {
-        const newSugg = document.createElement("a");
-        newSugg.setAttribute("href", "/view/" + vid.id);
-        newSugg.insertAdjacentText("afterbegin", vid.name + " " + vid.id);
-        newSuggestions.push(newSugg);
+        const a = document.createElement("a");
+        a.setAttribute("class", "dropdown-item")
+        a.setAttribute("href", "/view/" + vid.id);
+        a.insertAdjacentText("afterbegin", vid.name + " " + vid.id);
+        const li = document.createElement("li");
+        li.appendChild(a);
+        newSuggestions.push(li);
     }
     o.replaceChildren(...newSuggestions);
 }
-
-$(document).ready(function() {
-    $('.select2').select2({
-        placeholder: 'Search for videos',
-        ajax: {
-            url: '/api/search/',
-            data: (params) => { return { q: params.term } },
-            dataType: 'json',
-            processResults: function(data) {
-                for(const vid of data) {
-                    vid.text = vid.name + " " + vid.id;
-                    delete vid['name'];
-                }
-                return {
-                    results: data
-                }
-            }
-        }
-    });
-});
-*/
\ No newline at end of file