tmp

lib/views/layout/2column.html

@@ -10,14 +10,6 @@
     </a>
   {% if searchConfigured() %}
   <div class="navbar-form navbar-left search-top" role="search" id="search-top">
-    <div class="form-group input-group search-top-input-group">
-      <input type="text" id="search-top-input" class="search-top-input form-control" placeholder="Search ...">
-      <span class="input-group-btn">
-        <button class="btn btn-default" type="button"><i class="search-top-icon fa fa-search"></i></button>
-      </span>
-    </div>
-  </div>
-  <div class="search-suggest" id="search-suggest">
   </div>
   {% endif %}
   </div>

resource/js/app.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 
 import HeaderSearchBox from './components/Header/SearchBox';
 
+/*
 class Crowi extends React.Component {
   constructor(props) {
     super(props);
@@ -16,10 +17,11 @@ class Crowi extends React.Component {
     );
   }
 }
+*/
 
-var xxx = document.getElementById('xxx');
-if (xxx) {
+var searchElement = document.getElementById('search-top');
+if (searchElement) {
   $(function() {
-    ReactDOM.render(<Crowi />, xxx);
+    ReactDOM.render(<HeaderSearchBox />, searchElement);
   });
 }

resource/js/components/Header/SearchBox.js

@@ -1,10 +1,18 @@
 import React from 'react';
 
-export class SearchBox extends React.Component {
+import SearchSuggest from './SearchSuggest';
+
+export default class extends React.Component {
 
   render() {
     return (
-      <h1>Hello</h1>
+      <div className="form-group input-group search-top-input-group">
+        <input type="text" id="search-top-input" className="search-top-input form-control" placeholder="Search ..." />
+        <span className="input-group-btn">
+          <button className="btn btn-default" type="button"><i className="search-top-icon fa fa-search"></i></button>
+        </span>
+        <SearchSuggest />
+      </div>
     );
   }
 }

resource/js/components/Header/SearchSuggest.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class extends React.Component {
+
+  render() {
+    return (
+      <div className="search-suggest" id="search-suggest">
+      </div>
+    );
+  }
+}