feat($plugin-search): Add support for search hotkeys (#1848)

vuejs · Sep 12, 2019 · 1ba06ae · 1ba06ae
1 parent 0434f15
commit 1ba06ae
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/packages/@vuepress/plugin-search/SearchBox.vue b/packages/@vuepress/plugin-search/SearchBox.vue
@@ -13,6 +13,7 @@
       @keyup.enter="go(focusIndex)"
       @keyup.up="onUp"
       @keyup.down="onDown"
+      ref="input"
     >
     <ul
       class="suggestions"
@@ -37,7 +38,7 @@
 </template>
 
 <script>
-/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS */
+/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
 export default {
   data () {
     return {
@@ -50,7 +51,13 @@ export default {
 
   mounted () {
     this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
+    document.addEventListener('keydown', this.onHotkey)
   },
+
+  beforeDestroy () {
+    document.removeEventListener('keydown', this.onHotkey)
+  },
+
   computed: {
     showSuggestions () {
       return (
@@ -70,7 +77,8 @@ export default {
       const max = this.$site.themeConfig.searchMaxSuggestions || SEARCH_MAX_SUGGESTIONS
       const localePath = this.$localePath
       const matches = item => (
-        item.title
+        item
+        && item.title
         && item.title.toLowerCase().indexOf(query) > -1
       )
       const res = []
@@ -136,6 +144,13 @@ export default {
       }).length > 0
     },
 
+    onHotkey (event) {
+      if (event.srcElement === document.body && SEARCH_HOTKEYS.includes(event.key)) {
+        this.$refs.input.focus()
+        event.preventDefault()
+      }
+    },
+
     onUp () {
       if (this.showSuggestions) {
         if (this.focusIndex > 0) {

diff --git a/packages/@vuepress/plugin-search/index.js b/packages/@vuepress/plugin-search/index.js
@@ -8,6 +8,7 @@ module.exports = (options) => ({
 
   define: {
     SEARCH_MAX_SUGGESTIONS: options.searchMaxSuggestions || 5,
-    SEARCH_PATHS: options.test || null
+    SEARCH_PATHS: options.test || null,
+    SEARCH_HOTKEYS: options.searchHotkeys || ['s', '/']
   }
 })
diff --git a/packages/docs/docs/plugin/official/plugin-search.md b/packages/docs/docs/plugin/official/plugin-search.md
@@ -95,6 +95,13 @@ You can set up searchable paths with `test` as:
 
 Otherwise,  the default search will return duplicates, once you can have similar content between folders `/master/`, `/1.0/` and `/2.0/`.
 
+### searchHotkeys
+
+- Type: `Array<string>`
+- Default: `['s', '/']`
+
+Configure the hotkeys which when pressed will focus the search box. Set to an empty array to disable this feature.
+
 ## Tips
 
 ### Tweak the default colors.