applying react-bootstrap-typeahead

resource/css/_search.scss

@@ -1,3 +1,5 @@
+@import "./page_list";
+
 .search-listpage-icon {
   font-size: 16px;
   color: #999;
@@ -43,23 +45,31 @@
       padding: 0;
     }
   }
-}
 
-.search-suggest {
-  // => dicided by JS
-  // top: 43px;
-  // left: 125px;
-  //display: none;
-  position: absolute;
-  width: 500px;
-  background: #fff;
-  border: solid 1px #ccc;
-  box-shadow: 0 0 1px rgba(0,0,0,.3);
-  padding: 16px;
+  // using react-bootstrap-typeahead
+  // see: https://github.com/ericgio/react-bootstrap-typeahead
+  .bootstrap-typeahead-menu {
+    li a span {
+      .picture {
+        width: 14px;
+        height: 14px;
+      }
+
+      .page-path {
+        display: inline;
+        padding: 0 4px;
+        color: inherit;
+      }
 
+      .page-list-meta {
+        font-size: .9em;
+        color: #999;
 
-  .searching {
-    color: #666;
+        >span {
+          margin-right: .3rem;
+        }
+      }
+    }
   }
 }
 
@@ -162,10 +172,6 @@
       width: 50%;
     }
     .search-box {
-      .search-suggest {
-        left: 2%;
-        width: 94%;
-      }
     }
   }
 }

resource/js/components/HeaderSearchBox.js

@@ -61,6 +61,8 @@ export default class SearchBox extends React.Component {
       <div className="search-box">
         <SearchForm
           onSearchFormChanged={this.search}
+          searchedPages={this.state.searchedPages}
+          searchError={this.state.searchError}
           />
         {/* omit since using react-bootstrap-typeahead in SearchForm
         <SearchSuggest

resource/js/components/HeaderSearchBox/SearchForm.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import { FormGroup, FormControl, DropdownButton, MenuItem, Button, Checkbox, InputGroup } from 'react-bootstrap';
+import { FormGroup, Button, InputGroup } from 'react-bootstrap';
 
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 
+import UserPicture from '../User/UserPicture';
+import PageListMeta from '../PageList/PageListMeta';
+import PagePath from '../PageList/PagePath';
+
 // Header.SearchForm
 export default class SearchForm extends React.Component {
 
@@ -17,6 +21,7 @@ export default class SearchForm extends React.Component {
     this.search = this.search.bind(this);
     this.clearForm = this.clearForm.bind(this);
     this.getFormClearComponent = this.getFormClearComponent.bind(this);
+    this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);
   }
 
   componentDidMount() {
@@ -49,7 +54,21 @@ export default class SearchForm extends React.Component {
     this.setState({keyword: ''});
   }
 
+  renderMenuItemChildren(option, props, index) {
+    const page = option;
+    return (
+      <span>
+        <UserPicture user={page.revision.author} />
+        <PagePath page={page} />
+        <PageListMeta page={page} />
+      </span>
+    );
+  }
+
   render() {
+    const options = this.props.searchedPages;
+
+    const emptyLabel = (this.props.searchError !== null) ? 'Error on searching.' : 'No matches found.';
     const formClear = this.getFormClearComponent();
 
     return (
@@ -62,9 +81,13 @@ export default class SearchForm extends React.Component {
             <AsyncTypeahead
               ref={ref => this._typeahead = ref}
               name="q"
+              labelKey="path"
+              options={options}
               placeholder="Search ... Page Title (Path) and Content"
+              emptyLabel={emptyLabel}
               submitFormOnEnter={true}
               onSearch={this.search}
+              renderMenuItemChildren={this.renderMenuItemChildren}
             />
             {formClear}
             <InputGroup.Button>
@@ -83,4 +106,9 @@ export default class SearchForm extends React.Component {
 
 SearchForm.propTypes = {
   onSearchFormChanged: React.PropTypes.func.isRequired,
+  searchedPages: React.PropTypes.array.isRequired,
+};
+
+SearchForm.defaultProps = {
+  searchError: null
 };