Groundwork in base.html and searchsuggestions.js

core/templates/base.html

@@ -56,7 +56,8 @@
                   <input class="form-control form-control-navbar"
                          type="search"
                          placeholder="Search"
-                         aria-label="Search">
+                         aria-label="Search"
+                         id="searchinput">
                   <div class="input-group-append">
                     <button class="btn btn-navbar" type="submit">
                       <i class="fas fa-search"></i>
@@ -123,5 +124,6 @@
       <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
       <script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
       <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
+      <script src="{% static 'dist/js/searchsuggestions.js' %}"></script>
     </body>
   </html>

static/dist/js/searchsuggestions.js

@@ -0,0 +1,13 @@
+const searchinput = document.querySelector("#searchinput");
+searchinput.addEventListener("input", (e) => {
+    q(e.target.value);
+});
+async function q(s) {
+    try {
+        const response = await fetch("http://localhost:8000/api/?q=" + s);
+        const result = await response.json();
+        console.log("Success: " + JSON.stringify(result));
+    } catch(error) {
+        console.log("Error: " + error);
+    }
+}