diff --git a/README.md b/README.md index 941e85a..ebf3bef 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,7 @@ include|[]|An array of values that should be included from the searcher's output maxPatternLength|32|The maximum length of the pattern. The longer the pattern, the more intensive the search operation will be. Whenever the pattern exceeds the maxPatternLength, an error will be thrown. onSelect| noop | Function to be executed on selection of any result. width|430|width of the fuzzy searchbox +keyForDisplayName|title|The key which should be used for list item text. keys|all[Array]|List of properties that will be searched. This also supports nested properties. list|null|Array of properties to be filtered. placeholder|'Search'|Placeholder of the searchbox diff --git a/src/index.js b/src/index.js index 98404e4..36afbc2 100644 --- a/src/index.js +++ b/src/index.js @@ -57,7 +57,7 @@ function defaultResultsTemplate(props, state, styl, clickHandler) { const style = state.selectedIndex === i ? styl.selectedResultStyle : styl.resultsStyle; return (
clickHandler(i)}> - {val.title} + {val[props.keyForDisplayName]}
); }); @@ -73,6 +73,7 @@ export default class FuzzySearch extends Component { maxPatternLength: PropTypes.number, onSelect: PropTypes.func.isRequired, width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + keyForDisplayName: PropTypes.string, keys: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), list: PropTypes.array.isRequired, location: PropTypes.number, @@ -92,6 +93,7 @@ export default class FuzzySearch extends Component { caseSensitive: false, distance: 100, include: [], + keyForDisplayName: 'title', location: 0, width: 430, placeholder: 'Search', diff --git a/src/tests/index.js b/src/tests/index.js index 0f605d7..57d336d 100644 --- a/src/tests/index.js +++ b/src/tests/index.js @@ -119,4 +119,27 @@ describe('', () => { // Each result should have a 'matches' array now with `includeMatches` expect(wrapper.state('results')[0].matches.length).to.not.equal(0); }); + + it('should display keyForDisplayName when passed in', () => { + const onChange = sinon.spy(); + const wrapper = mount( + , + ); + + const input = wrapper.find('input'); + input.simulate('change', { + target: { + value: 'f', + }, + }); + + // Each result should have a 'matches' array now with `includeMatches` + expect(wrapper.state('results')[0].item.title).to.equal('The Great Gatsby'); + }); });