Resize search results and auto-hide them using JS

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;
     }
 

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 {

aleksis/core/templates/search/searchbar_snippet.html

-<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>