diff --git a/src/Geosuggest.tsx b/src/Geosuggest.tsx index 417643c..c59cdce 100644 --- a/src/Geosuggest.tsx +++ b/src/Geosuggest.tsx @@ -372,10 +372,12 @@ export default class GeoSuggest extends React.Component { suggests.push({ ...fixture, isFixture: true, - matchedSubstrings: { - length: userInput.length, - offset: fixture.label.indexOf(userInput) - }, + matchedSubstrings: [ + { + length: userInput.length, + offset: fixture.label.indexOf(userInput) + } + ], placeId: fixture.placeId || fixture.label }); } @@ -390,7 +392,7 @@ export default class GeoSuggest extends React.Component { label: this.props.getSuggestLabel ? this.props.getSuggestLabel(suggest) : '', - matchedSubstrings: suggest.matched_substrings[0], + matchedSubstrings: suggest.matched_substrings, placeId: suggest.place_id }); } diff --git a/src/suggest-item.tsx b/src/suggest-item.tsx index 5b89373..8d2386a 100644 --- a/src/suggest-item.tsx +++ b/src/suggest-item.tsx @@ -43,12 +43,8 @@ export default class SuggestItem extends React.PureComponent { /** * Makes a text bold */ - makeBold(element: string, key: string): JSX.Element { - return ( - - {element} - - ); + makeBold(element: string) { + return {element}; } /** @@ -59,31 +55,30 @@ export default class SuggestItem extends React.PureComponent { return suggest.label; } - const start: number = suggest.matchedSubstrings.offset; - const length: number = suggest.matchedSubstrings.length; - const end: number = start + length; - const boldPart = this.makeBold( - suggest.label.substring(start, end), - suggest.label - ); + const parts = []; - let pre = ''; - let post = ''; + let previousEnd = 0; + + for (const {offset: start, length} of suggest.matchedSubstrings) { + // Add non-matching substring before and between matches + if (start > previousEnd) { + parts.push(suggest.label.substring(previousEnd, start)); + } - if (start > 0) { - pre = suggest.label.slice(0, start); + // Add matching substring as bold text + const end = start + length; + const match = this.makeBold(suggest.label.substring(start, end)); + parts.push(match); + + previousEnd = end; } - if (end < suggest.label.length) { - post = suggest.label.slice(end); + + // Add non-matching substring after matches + if (previousEnd < suggest.label.length) { + parts.push(suggest.label.substring(previousEnd)); } - return ( - - {pre} - {boldPart} - {post} - - ); + return {parts}; } /** diff --git a/src/types/suggest.ts b/src/types/suggest.ts index 6f86d64..2dc02b7 100644 --- a/src/types/suggest.ts +++ b/src/types/suggest.ts @@ -13,6 +13,6 @@ export interface Suggest { readonly matchedSubstrings?: { offset: number; length: number; - }; + }[]; readonly className?: string; }