Added highlight matched text

README.md

@@ -155,6 +155,12 @@ Default: `250`
 Sets the delay in milliseconds after typing before a request will be sent to find suggestions.
 Specify `0` if you wish to fetch suggestions after every keystroke.
 
+#### highlightMatch
+Type: `Boolean`
+Default: `true`
+
+Highlights matched text.
+
 #### onFocus
 Type: `Function`
 Default: `function() {}`

src/Geosuggest.jsx

@@ -241,7 +241,8 @@ class Geosuggest extends React.Component {
         suggests.push({
           label: this.props.getSuggestLabel(suggest),
           placeId: suggest.place_id,
-          isFixture: false
+          isFixture: false,
+          matchedSubstrings: suggest.matched_substrings[0]
         });
       }
     });
@@ -404,6 +405,8 @@ class Geosuggest extends React.Component {
       suggestionsList = <SuggestList isHidden={this.state.isSuggestsHidden}
         style={this.props.style.suggests}
         suggestItemStyle={this.props.style.suggestItem}
+        userInput={this.state.userInput}
+        isHighlightMatch={this.props.highlightMatch}
         suggestsClassName={this.props.suggestsClassName}
         suggestItemClassName={this.props.suggestItemClassName}
         suggests={this.state.suggests}

src/defaults.js

@@ -16,6 +16,7 @@ export default {
   types: null,
   queryDelay: 250,
   googleMaps: null,
+  highlightMatch: true,
   onActivateSuggest: () => {},
   onSuggestSelect: () => {},
   onSuggestNoResults: () => {},

src/prop-types.js

@@ -24,6 +24,7 @@ export default {
   types: React.PropTypes.array,
   queryDelay: React.PropTypes.number,
   googleMaps: React.PropTypes.object,
+  highlightMatch: React.PropTypes.bool,
   onSuggestSelect: React.PropTypes.func,
   onFocus: React.PropTypes.func,
   onBlur: React.PropTypes.func,

src/suggest-item.jsx

@@ -18,6 +18,36 @@ export default class SuggestItem extends React.Component {
     return shallowCompare(this, nextProps, nextState);
   }
 
+    /**
+     * Makes a text bold
+     * @param {String} el element
+     * @return {JSX} Bolder text
+     */
+  makeBold(el) {
+    return <b className="matched-text">
+        {el}</b>;
+  }
+
+  /**
+   * Replace matched text with the same bold
+   * @param {Object} userInput Value from input
+   * @param {Object} suggest Data from google
+   * @return {String} Formatted string with highlighted matched text
+   */
+  formatMatchedText(userInput, suggest) {
+    if (!userInput || !suggest.matchedSubstrings) {
+      return suggest.label;
+    }
+
+    let start = suggest.matchedSubstrings.offset,
+      end = suggest.matchedSubstrings.length,
+      split = suggest.label.split('');
+    split.splice(start, end,
+      this.makeBold(suggest.label.substring(start, end)));
+
+    return <span>{split}</span>;
+  }
+
   /**
    * When the suggest item got clicked
    * @param {Event} event The click event
@@ -46,7 +76,10 @@ export default class SuggestItem extends React.Component {
       onMouseDown={this.props.onMouseDown}
       onMouseOut={this.props.onMouseOut}
       onClick={this.onClick}>
-        {this.props.suggest.label}
+        { this.props.isHighlightMatch
+          ? this.formatMatchedText(
+            this.props.userInput, this.props.suggest)
+          : this.props.suggest.label }
     </li>;
   }
 }

src/suggest-list.jsx

@@ -59,6 +59,8 @@ export default class SuggestList extends React.Component {
 
         return <SuggestItem key={suggest.placeId}
           className={suggest.className}
+          userInput={this.props.userInput}
+          isHighlightMatch={this.props.isHighlightMatch}
           suggest={suggest}
           style={this.props.suggestItemStyle}
           suggestItemClassName={this.props.suggestItemClassName}

test/Geosuggest_spec.jsx

@@ -530,4 +530,21 @@ describe('Component: Geosuggest', () => {
       });
     });
   });
+
+  describe('with highLightMatch', () => { // eslint-disable-line max-len
+    const props = {
+      suggestsClassName: 'suggests-class'
+    };
+
+    beforeEach(() => render(props));
+
+    it('should highlight matched text', () => { // eslint-disable-line max-len
+      const geoSuggestInput = TestUtils.findRenderedDOMComponentWithClass(component, 'geosuggest__input'); // eslint-disable-line max-len
+      geoSuggestInput.value = 'New';
+      TestUtils.Simulate.change(geoSuggestInput);
+      TestUtils.Simulate.focus(geoSuggestInput);
+      let matchedText = TestUtils.scryRenderedDOMComponentsWithClass(component, 'matched-text'); // eslint-disable-line max-len
+      expect(matchedText).to.have.length.of.at.least(1); // eslint-disable-line max-len
+    });
+  });
 });