From c6f3f0958dd164cf5c2ecc45fd4dd91eede81f2a Mon Sep 17 00:00:00 2001
From: maxaggedon <max@aggedon.com>
Date: Fri, 23 Nov 2018 23:27:59 +0100
Subject: [PATCH] feat: customizable search placeholder (#1126)

* feat: customizable search placeholder

* prettier
---
 docs/guides-search.md        | 14 ++++++++++++++
 v1/lib/core/nav/HeaderNav.js |  5 +++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/guides-search.md b/docs/guides-search.md
index 7e94248139..b15630fac8 100644
--- a/docs/guides-search.md
+++ b/docs/guides-search.md
@@ -61,6 +61,20 @@ const siteConfig = {
 };
 ```
 
+## Customizing the placeholder
+
+If you want to change the placeholder (which defaults to *Search*), add the `placeholder` field in your config. For example, you may want the search bar to display *Ask me something*:
+
+```js
+const siteConfig = {	
+  ...	
+  algolia: {	
+    ...	
+    placeholder: 'Ask me something'
+  },	
+};	
+```
+
 ## Disabling the Search Bar
 
 To disable the search bar, comment out (recommended) or delete the `algolia` section in the `siteConfig.js` file.
diff --git a/v1/lib/core/nav/HeaderNav.js b/v1/lib/core/nav/HeaderNav.js
index 75cdb5e337..177a84ce0f 100644
--- a/v1/lib/core/nav/HeaderNav.js
+++ b/v1/lib/core/nav/HeaderNav.js
@@ -131,13 +131,14 @@ class HeaderNav extends React.Component {
     let docGroupActive = false;
     if (link.search && this.props.config.algolia) {
       // return algolia search bar
+      const placeholder = this.props.config.algolia.placeholder || 'Search';
       return (
         <li className="navSearchWrapper reactNavSearchWrapper" key="search">
           <input
             id="search_input_react"
             type="text"
-            placeholder="Search"
-            title="Search"
+            placeholder={placeholder}
+            title={placeholder}
           />
         </li>
       );