Resolve "Fix search.js autocompletion"

Closes #488 (closed)

aleksis/core/static/js/search.js

@@ -13,6 +13,7 @@ var Autocomplete = function (options) {
     this.form_elem = null;
     this.query_box = null;
     this.selected_element = null;
+    this.loader = $("#search-loader");
 };
 
 Autocomplete.prototype.setup = function () {
@@ -32,10 +33,11 @@ Autocomplete.prototype.setup = function () {
     // Trigger the "keyup" event if input gets focused
 
     this.query_box.focus(function () {
-        self.query_box.trigger("keydown");
+        self.query_box.trigger("input");
     });
 
-    this.query_box.keyup(function () {
+    this.query_box.on("input", () => {
+        console.log("Input changed, fetching again...")
         var query = self.query_box.val();
 
         if (query.length < self.minimum_length) {
@@ -97,11 +99,16 @@ Autocomplete.prototype.fetch = function (query) {
     var self = this;
 
     $.ajax({
-        url: this.url
-        , data: {
+        url: this.url,
+        data: {
             'q': query
-        }
-        , success: function (data) {
+        },
+        beforeSend: (request, settings) => {
+            $('#search-results').remove();
+            self.setLoader(true);
+        },
+        success: function (data) {
+            self.setLoader(false);
             self.show_results(data);
         }
     })
@@ -122,3 +129,10 @@ Autocomplete.prototype.setSelectedResult = function (element) {
     this.selected_element = element;
     console.log("New element: ", element);
 };
+
+Autocomplete.prototype.setLoader = function (value) {
+    var self = this;
+    if (typeof value === "boolean"){
+        $("#search-loader").css("display", (value === true ? "block" : "none"))
+    }
+}