Search works

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
-                }
-            }
-        }
-    });
-});
-*/