Add keyForDisplayName prop

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

src/index.js

@@ -57,7 +57,7 @@ function defaultResultsTemplate(props, state, styl, clickHandler) {
     const style = state.selectedIndex === i ? styl.selectedResultStyle : styl.resultsStyle;
     return (
       <div key={i} style={style} onClick={() => clickHandler(i)}>
-        {val.title}
+        {val[props.keyForDisplayName]}
       </div>
     );
   });
@@ -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',

src/tests/index.js

@@ -119,4 +119,27 @@ describe('<FuzzySearch />', () => {
     // 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(
+      <FuzzySearch
+        keyForDisplayName="author"
+        list={list}
+        onSelect={onChange}
+        keys={['author', 'title']}
+        options={{ includeMatches: true }}
+      />,
+    );
+
+    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');
+  });
 });