[1.1.0 Release] Bug fixes and Additional Props

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fuzzy",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React Fuzzy Component",
   "repository": {
     "type": "git",

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',
@@ -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 (
-        <div key={i} style={style}>
-          {val.title}
-        </div>
-      );
-    });
-  }
-
   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 : '',
     });
   }
 

src/tests/index.js

@@ -71,7 +71,7 @@ describe('<FuzzySearch />', () => {
       },
     });
 
-    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('<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');
+  });
 });