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/package.json b/package.json
index 928ddcf..bef6062 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-fuzzy",
- "version": "1.0.0",
+ "version": "1.1.0",
"description": "React Fuzzy Component",
"repository": {
"type": "git",
diff --git a/src/index.js b/src/index.js
index db59d92..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',
@@ -155,18 +157,6 @@ export default class FuzzySearch extends Component {
};
}
- getResultsTemplate() {
- return this.state.results.map((val, i) => {
- const style =
- this.state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
- return (
-
- {val.title}
-
- );
- });
- }
-
handleChange(e) {
this.setState({
results: this.fuse.search(e.target.value).slice(0, this.props.maxResults - 1),
@@ -200,7 +190,7 @@ export default class FuzzySearch extends Component {
this.setState({
results: [],
selectedIndex: 0,
- value: results[this.state.selectedIndex].item.value,
+ value: results[this.state.selectedIndex].item ? results[this.state.selectedIndex].item.value : '',
});
}
}
@@ -214,7 +204,7 @@ export default class FuzzySearch extends Component {
this.setState({
results: [],
selectedIndex: 0,
- value: results[this.state.selectedIndex].item.value,
+ value: results[this.state.selectedIndex].item ? results[this.state.selectedIndex].item.value : '',
});
}
diff --git a/src/tests/index.js b/src/tests/index.js
index 8564d34..57d336d 100644
--- a/src/tests/index.js
+++ b/src/tests/index.js
@@ -71,7 +71,7 @@ describe('', () => {
},
});
- expect(wrapper.state('results')).to.eql([2, 1]);
+ expect(wrapper.state('results')).to.eql(['1', '2']);
});
it('should call onChange on selection of result', () => {
@@ -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');
+ });
});