diff --git a/packages/@vuepress/plugin-search/SearchBox.vue b/packages/@vuepress/plugin-search/SearchBox.vue index 6fbbd70b3ebca13d8aa64a3c34c1fcc24f92a88a..3a48566f22d7bbb010ef8b32a25de6daf1195006 100644 --- a/packages/@vuepress/plugin-search/SearchBox.vue +++ b/packages/@vuepress/plugin-search/SearchBox.vue @@ -5,6 +5,7 @@ aria-label="Search" :value="query" :class="{ 'focused': focused }" + :placeholder="placeholder" autocomplete="off" spellcheck="false" @focus="focused = true" @@ -42,10 +43,14 @@ export default { return { query: '', focused: false, - focusIndex: 0 + focusIndex: 0, + placeholder: undefined } }, + mounted () { + this.placeholder = this.$site.themeConfig.searchPlaceholder || '' + }, computed: { showSuggestions () { return ( diff --git a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue b/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue index f4ff3ffbd0f6b4ca56aec51f8a4fd68c6f52690a..92818a125ccbe8552f39c1341840de0dc027cb99 100644 --- a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue +++ b/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue @@ -7,6 +7,7 @@ @@ -15,8 +16,15 @@ export default { props: ['options'], + data () { + return { + placeholder: undefined + } + }, + mounted () { this.initialize(this.options, this.$lang) + this.placeholder = this.$site.themeConfig.searchPlaceholder || '' }, methods: { diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index 7da053b361a8fa04581a4c215574ec90abe5ff5e..574ec98adcf75194da98e58abf81eaa508c06662 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -351,6 +351,18 @@ Unlike the [built-in search](#built-in-search) engine which works out of the box For more options, check out [Algolia DocSearch’s documentation](https://github.com/algolia/docsearch#docsearch-options). +### Search Placeholder + +You can define a placeholder for the search box by adding the `searchPlaceholder` attribute: + +``` js +module.exports = { + themeConfig: { + searchPlaceholder: 'Search...' + } +} +``` + ## Last Updated The `themeConfig.lastUpdated` option allows you to get the UNIX timestamp(ms) of each file’s last `git` commit, and it will also display at the bottom of each page in an appropriate format: