diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..01ec5df
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1 @@
+module.exports = require("./.eslintrc").rules["prettier/prettier"][1];
diff --git a/src/index.js b/src/index.js
index f4710c3..db59d92 100644
--- a/src/index.js
+++ b/src/index.js
@@ -113,6 +113,7 @@ export default class FuzzySearch extends Component {
results: [],
selectedIndex: 0,
selectedValue: {},
+ value: '',
};
this.handleChange = this.handleChange.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -156,29 +157,39 @@ 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}
;
+ 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),
+ value: e.target.value,
});
}
handleKeyDown(e) {
const { results, selectedIndex } = this.state;
+
+ // Handle DOWN arrow
if (e.keyCode === 40 && selectedIndex < results.length - 1) {
this.setState({
selectedIndex: selectedIndex + 1,
});
+
+ // Handle UP arrow
} else if (e.keyCode === 38 && selectedIndex > 0) {
this.setState({
selectedIndex: selectedIndex - 1,
});
+
+ // Handle ENTER
} else if (e.keyCode === 13) {
if (results[selectedIndex]) {
this.props.onSelect(results[this.state.selectedIndex]);
@@ -189,6 +200,7 @@ export default class FuzzySearch extends Component {
this.setState({
results: [],
selectedIndex: 0,
+ value: results[this.state.selectedIndex].item.value,
});
}
}
@@ -202,11 +214,17 @@ export default class FuzzySearch extends Component {
this.setState({
results: [],
selectedIndex: 0,
+ value: results[this.state.selectedIndex].item.value,
});
}
render() {
- const { className, width, resultsTemplate, placeholder, autoFocus } = this.props;
+ const { autoFocus, className, list, placeholder, resultsTemplate, width } = this.props;
+
+ // Update the search space list
+ if (this.fuse.setCollection && list) {
+ this.fuse.setCollection(list);
+ }
const mainClass = classNames('react-fuzzy-search', className);
@@ -214,19 +232,19 @@ export default class FuzzySearch extends Component {
- {this.state.results &&
- this.state.results.length > 0 &&
+ {this.state.results && this.state.results.length > 0 && (
{resultsTemplate(this.props, this.state, styles, this.handleMouseClick)}
-
}
+
+ )}
);
}