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');
+ });
});