Search works

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>

static/dist/js/searchsuggestions.js

@@ -1,50 +1,38 @@
-$(document).ready(() => {
+const searchinput = document.querySelector("#search");
-});
+const searchsuggestions = document.querySelector("#searchdropdown");
-
-/*
-const searchinput = document.querySelector("#searchinput");
-const searchsuggestions = document.querySelector("#searchsuggestions");
 searchinput.addEventListener("input", (e) => {
     q(e.target.value);
 });
 async function q(s) {
+    if (s.length < 1) {clearSuggestions(searchsuggestions)}
+    else {
         try {
-        const response = await fetch("/api/?q=" + s);
+            const response = await fetch("/api/search/?q=" + s);
             const result = await response.json();
-        console.log("Success: " + JSON.stringify(result));
             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");
+        const a = document.createElement("a");
-        newSugg.setAttribute("href", "/view/" + vid.id);
+        a.setAttribute("class", "dropdown-item")
-        newSugg.insertAdjacentText("afterbegin", vid.name + " " + vid.id);
+        a.setAttribute("href", "/view/" + vid.id);
-        newSuggestions.push(newSugg);
+        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
-                }
-            }
-        }
-    });
-});
-*/