_search route

lib/routes/search.js

@@ -12,10 +12,15 @@ module.exports = function(crowi, app) {
   var api = actions.api = {};
 
   actions.searchPage = function(req, res) {
+    var keyword = req.query.q || null;
     var search = crowi.getSearcher();
     if (!search) {
       return res.json(ApiResponse.error('Configuration of ELASTICSEARCH_URI is required.'));
     }
+
+    return res.render('search', {
+      q: keyword,
+    });
   };
 
   /**

lib/views/page_list.html

@@ -30,9 +30,6 @@
 
 {% endblock %}
 
-{% block content_head_after %}
-{% endblock %}
-
 {% block content_main %}
 
 {% block content_main_before %}

lib/views/search.html

@@ -0,0 +1,30 @@
+{% extends 'layout/single.html' %}
+
+{% block main_css_class %}search-page{% endblock %}
+
+{% block html_title %}Search {% endblock %}
+
+{% block content_head %}
+  {% block content_head_before %}
+  {% endblock %}
+
+  <div class="header-wrap">
+    <header class="">
+      <input type="text" name="q" value="{{ q }}" class="form-control">
+    </header>
+  </div>
+{% endblock %}
+
+{% block content_main %}
+
+<div class="search-list content-main" id="content-main">
+  <div class="search-result row">
+    <div class="col-md-3 page-list">
+    </div>
+    <div class="col-md-9">
+      pages ...
+    </div>
+  </div>
+</div>
+
+{% endblock %}

resource/js/components/Header/SearchForm.js

@@ -42,10 +42,14 @@ export default class SearchForm extends React.Component {
   render() {
     return (
       <form
+        action="/_search"
         className="search-form form-group input-group search-top-input-group"
-        onSubmit={this.handleSubmit}
       >
-        <input type="text" className="search-top-input form-control" placeholder="Search ..."
+        <input
+          type="text"
+          className="search-top-input form-control"
+          placeholder="Search ..."
+          name="q"
           value={this.state.keyword}
           onChange={this.handleChange}
         />