diff --git a/assets/src/components/Listing.vue b/assets/src/components/Listing.vue
index ab41aeca..1f7158ae 100644
--- a/assets/src/components/Listing.vue
+++ b/assets/src/components/Listing.vue
@@ -109,12 +109,14 @@ export default {
     this.resizeEvent()
 
     // Add the needed event listeners to the window and document.
+    window.addEventListener('keydown', this.keyEvent)
     window.addEventListener('resize', this.resizeEvent)
     document.addEventListener('dragover', this.preventDefault)
     document.addEventListener('drop', this.drop)
   },
   beforeDestroy () {
     // Remove event listeners before destroying this page.
+    window.removeEventListener('keydown', this.keyEvent)
     window.removeEventListener('resize', this.resizeEvent)
     document.removeEventListener('dragover', this.preventDefault)
     document.removeEventListener('drop', this.drop)
@@ -123,6 +125,18 @@ export default {
     base64: function (name) {
       return window.btoa(unescape(encodeURIComponent(name)))
     },
+    keyEvent (event) {
+      if (!event.ctrlKey && !event.metaKey) {
+        return
+      }
+
+      if (String.fromCharCode(event.which).toLowerCase() !== 'f') {
+        return
+      }
+
+      event.preventDefault()
+      this.$store.commit('showHover', 'search')
+    },
     preventDefault (event) {
       // Wrapper around prevent default.
       event.preventDefault()
diff --git a/assets/src/components/Search.vue b/assets/src/components/Search.vue
index ef214703..763055d0 100644
--- a/assets/src/components/Search.vue
+++ b/assets/src/components/Search.vue
@@ -8,6 +8,8 @@
       <input type="text"
         @keyup="keyup"
         @keyup.enter="submit"
+        ref="input"
+        :autofocus="active"
         v-model.trim="value"
         aria-label="Write here to search"
         :placeholder="placeholder">
@@ -41,18 +43,32 @@ export default {
   data: function () {
     return {
       value: '',
+      active: false,
       ongoing: false,
       scrollable: null,
       search: [],
       commands: []
     }
   },
+  watch: {
+    show (val, old) {
+      this.active = (val === 'search')
+
+      // If the hover was search and now it's something else
+      // we should blur the input.
+      if (old === 'search' && val !== 'search') {
+        this.$refs.input.blur()
+      }
+
+      // If we are starting to show the search box, we should
+      // focus the input.
+      if (val === 'search') {
+        this.$refs.input.focus()
+      }
+    }
+  },
   computed: {
     ...mapState(['user', 'show']),
-    // Computed property for activeness of search.
-    active () {
-      return (this.show === 'search')
-    },
     // Placeholder value.
     placeholder: function () {
       if (this.user.allowCommands && this.user.commands.length > 0) {