diff --git a/package-lock.json b/package-lock.json index 62ec4f8..913c4c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@reactmaker/react-autocorrect-input", - "version": "1.0.2", + "version": "1.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index abe353f..6c8d80b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@reactmaker/react-autocorrect-input", "description": "Autocorrect input react component, suggested text when you type in.", - "version": "1.0.2", + "version": "1.0.3", "main": "bin/Input.js", "repository": { "type": "git", diff --git a/src/components/Input.js b/src/components/Input.js index d5cc4bd..00783c5 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -57,28 +57,19 @@ const initState = { selectedSuggest: '', }; -export default class ACInput extends React.Component { +export default class ACInput extends React.PureComponent { inputRef = React.createRef() state = initState onChange = (e) => { const { dataSource, onChange } = this.props; - const { value, selectionStart } = e.target; - // 1. get last keyword - const lastWord = value.split(' ').pop().toLowerCase(); - if (!lastWord || selectionStart !== value.length) { - this.setState(initState); - onChange(value); - return; - } - // 2. filter suggest + const { value } = e.target; + // 1. filter suggest const suggest = dataSource - .map(keyword => keyword.toLowerCase()) - .filter(keyword => (keyword.indexOf(lastWord) === 0)) - .slice(0, 10); + .filter(keyword => (keyword.toLowerCase().indexOf(value.toLowerCase()) > -1)); const selectedSuggest = suggest[0] || ''; - // 3. update suggest array + // 2. update suggest array this.setState({ suggest, selectedSuggest }); onChange(value); } @@ -160,7 +151,7 @@ export default class ACInput extends React.Component { style={style} className={className} /> - + { suggest.map(keyword => (