diff --git a/aleksis/core/static/js/search.js b/aleksis/core/static/js/search.js
index 304f7f639010bba61b84479088c9a2da6a3db0d6..d08c7a9efefe7097729549f3653ae4c5d9e2d62b 100644
--- a/aleksis/core/static/js/search.js
+++ b/aleksis/core/static/js/search.js
@@ -20,11 +20,35 @@ Autocomplete.prototype.setup = function() {
   this.form_elem = $(this.form_selector);
   this.query_box = this.form_elem.find('input[name=q]');
 
+  // Trigger the "keyup" event if input gets focused
+
+  this.query_box.focus(function () {
+    self.query_box.trigger("keyup");
+  });
+
+  // Remove search results if input field isn't focused anymore
+  $('body').click(function (evt) {
+    if (evt.target.id in ["search", "search-results"])
+      return;
+
+    //For descendants of search-results being clicked, remove this check if you do not want to put constraint on descendants.
+    let distance = $(evt.target).closest('#search-results').length;
+    console.log(distance);
+    if (0 < distance && distance <= 2) {
+      console.log("clicked on a search result");
+      return;
+    }
+    //Do processing of click event here for every element except with id search-results
+    $('#search-results').remove();
+
+});
+
   // Watch the input box.
   this.query_box.on('keyup', function() {
     var query = self.query_box.val();
 
     if(query.length < self.minimum_length) {
+      $("#search-results").remove();
       return false;
     }
 
diff --git a/aleksis/core/static/style.scss b/aleksis/core/static/style.scss
index 4f91d3a3dfae93bc8672cefb6c987b183942a809..7fc8ee732a1e53735193502f10e4d83499df6d0e 100644
--- a/aleksis/core/static/style.scss
+++ b/aleksis/core/static/style.scss
@@ -8,6 +8,14 @@
   color: $primary-color !important;
 }
 
+.secondary-color {
+  background-color: $secondary-color !important;
+}
+
+.secondary-color-text, .secondary-color-text a {
+  color: $secondary-color !important;
+}
+
 rect#background {
   fill: $primary-color !important;
 }
@@ -175,6 +183,10 @@ li.active > a > .sidenav-badge {
   cursor: pointer;
 }
 
+a.collection-item.search-item {
+  padding: 20px 10px;
+}
+
 // Sidenav trigger
 
 header a.sidenav-trigger {
diff --git a/aleksis/core/templates/search/searchbar_snippet.html b/aleksis/core/templates/search/searchbar_snippet.html
index c191317a3596a97d3f87d1f2c617be8c4f75d33a..e89e3671846a78fcdad4eeee3fc9d34b5c21fbf0 100644
--- a/aleksis/core/templates/search/searchbar_snippet.html
+++ b/aleksis/core/templates/search/searchbar_snippet.html
@@ -1,4 +1,4 @@
-<a href="{{ result.object.get_absolute_url|default:"#" }}" class="collection-item">
+<a href="{{ result.object.get_absolute_url|default:"#" }}" class="collection-item secondary-color-text search-item">
   {{ result.object }}
   <i class="material-icons secondary-content search-result-icon">{{ result.object.icon_ }}</i>
 </a>