Merge branch '488-fix-search-js-autocompletion' into 'master'

Resolve "Fix search.js autocompletion"

Closes #488

See merge request !688

CHANGELOG.rst

@@ -13,6 +13,12 @@ Added
 ~~~~~
 
 * Support PDF generation without available request object (started completely from background).
+* Display a loading animation while fetching search results in the sidebar.
+
+Fixed
+~~~~~
+
+* Make search suggestions selectable using the arrow keys.
 
 Fixed
 ~~~~~

aleksis/core/static/js/search.js

@@ -32,10 +32,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 +98,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 +128,7 @@ Autocomplete.prototype.setSelectedResult = function (element) {
     this.selected_element = element;
     console.log("New element: ", element);
 };
+
+Autocomplete.prototype.setLoader = function (value) {
+        $("#search-loader").css("display", (value === true ? "block" : "none"))
+}

aleksis/core/static/style.scss

@@ -193,6 +193,11 @@ a.collection-item.search-item {
   padding: 20px 10px;
 }
 
+div#search-loader {
+  margin: 0.5rem 0 0 0;
+  display: none;
+}
+
 div#search-results {
   position: absolute;
   margin-top: -10px;

aleksis/core/templates/core/base.html

@@ -84,6 +84,7 @@
             <button class="btn btn-flat search-button" type="submit" aria-label="{% trans "Search" %}">
               <i class="material-icons">search</i>
             </button>
+            <div class="progress" id="search-loader"><div class="indeterminate"></div></div>
           </div>
         </form>
       </li>