diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 867fc8db286909731345e4c79aec90f20ece2454..c3da5da58d7d7d2c7cd3a92e28a35ee134692c18 100644
--- a/CHANGELOG.rst
+++ b/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
 ~~~~~
diff --git a/aleksis/core/static/js/search.js b/aleksis/core/static/js/search.js
index ea1dfb25b061f73a8a74c40edad3e3c8d073278e..fd121dbdfafe20c1c60ef2c793cd1f13b2a7573e 100644
--- a/aleksis/core/static/js/search.js
+++ b/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"))
+}
diff --git a/aleksis/core/static/style.scss b/aleksis/core/static/style.scss
index 3eca712924cadcd35ac7a44358850618374a5804..ab20ec56d066fa3d6ed7637a8cdf38bb105b0f21 100644
--- a/aleksis/core/static/style.scss
+++ b/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;
diff --git a/aleksis/core/templates/core/base.html b/aleksis/core/templates/core/base.html
index 27744b77a8d1632865d1cae6ede86462c810c488..5f70beda524a4fc25673f91c5e427d5a74cb98c8 100644
--- a/aleksis/core/templates/core/base.html
+++ b/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>