display search help contents

resource/js/components/SearchTypeahead.js

@@ -145,7 +145,7 @@ export default class SearchTypeahead extends React.Component {
     const defaultSelected = (this.props.keywordOnInit != '')
       ? [{path: this.props.keywordOnInit}]
       : [];
-    const help = <h1>help here</h1>;
+    const help = this.newMethod();
 
     return (
       <div className="search-typeahead">
@@ -171,6 +171,24 @@ export default class SearchTypeahead extends React.Component {
       </div>
     );
   }
+
+  newMethod() {
+    return <div className="search-help">
+            <p>Search Help</p>
+              <ul className="left">
+                <li>keyword</li>
+                <li>title:keyword</li>
+                <li>a b</li>
+                <li>-keyword</li>
+              </ul>
+              <ul className="right">
+                <li>記事名 or カテゴリ or 本文にkeywordを含む</li>
+                <li>記事名にkeywordを含む</li>
+                <li>文字列aとbを含む(スペース区切り)</li>
+                <li>文字列keywordを含まない</li>
+              </ul>
+            </div>;
+  }
 }
 
 /**

resource/styles/scss/_search.scss

@@ -51,6 +51,33 @@
   }
 }
 
+.search-help {
+  margin-left: none;
+  text-align: center;
+
+  .right, .left {
+    padding: 0px !important;
+    border: solid 1px #000000;
+    float: left;
+  }
+  .left {
+    width: 35%;
+  }
+  .right {
+    width: 65%;
+  }
+  ul, li {
+    border-bottom: solid 1px #000000;
+    padding: 0.2em;
+  }
+  li {
+    height: 3.8em;
+    word-wrap: break-word;
+    font-size: 0.8em;
+    line-height: 1.2em;
+  }
+}
+
 // top and sidebar input styles
 .search-top, .search-sidebar {
   .search-clear {