Form clear button

resource/css/_search.scss

@@ -5,11 +5,13 @@
 .search-listpage-clear {
   display: none;
   position: absolute;
+  right: 8px;
+  z-index: 10;
   font-size: 0.6em;
   width: 22px;
   height: 22px;
   color: #ccc;
-  padding: 5px 5px 5px 42px;
+  padding: 8px;
 }
 
 .search-input-group {
@@ -35,13 +37,21 @@
 .search-top {
   .search-top-input-group {
     .search-top-input {
-      &:focus {
-        width: 400px;
-        transition: .3s ease;
-      }
+      width: 400px;
     }
     .btn {
       padding: 6px 12px 7px;
+      margin-left: -3px;
+    }
+
+    .search-top-clear {
+      position: absolute;
+      right: 40px;
+      z-index: 10;
+      width: 22px;
+      height: 22px;
+      color: #ccc;
+      padding: 8px;
     }
   }
 }

resource/js/components/HeaderSearchBox/SearchForm.js

@@ -14,6 +14,7 @@ export default class SearchForm extends React.Component {
     this.handleChange = this.handleChange.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
+    this.clearForm = this.clearForm.bind(this);
     this.ticker = null;
   }
 
@@ -32,6 +33,20 @@ export default class SearchForm extends React.Component {
     }
   }
 
+  getFormClearComponent() {
+    if (this.state.keyword !== '') {
+      return <a className="search-top-clear" onClick={this.clearForm}><i className="fa fa-times-circle" /></a>;
+
+    } else {
+      return '';
+    }
+  }
+
+  clearForm() {
+    this.setState({keyword: ''});
+    this.search();
+  }
+
   searchFieldTicker() {
     this.search();
   }
@@ -50,6 +65,8 @@ export default class SearchForm extends React.Component {
   }
 
   render() {
+    const formClear = this.getFormClearComponent();
+
     return (
       <form
         action="/_search"
@@ -59,7 +76,7 @@ export default class SearchForm extends React.Component {
           autocomplete="off"
           type="text"
           className="search-top-input form-control"
-          placeholder="Search ..."
+          placeholder="Search ... Page Title (Path) and Content"
           name="q"
           value={this.state.keyword}
           onFocus={this.handleFocus}
@@ -71,6 +88,7 @@ export default class SearchForm extends React.Component {
             <i className="search-top-icon fa fa-search"></i>
           </button>
         </span>
+        {formClear}
       </form>
     );
   }