I am working on an auto-complete, right now I have it in pure JS
here I have this example in JSFiddle
<input type="text" onkeyup="changeInput(this.value)">
<div id="result"></div>
the js part
var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];
function matchPeople(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchPeople(val);
document.getElementById("result").innerHTML = autoCompleteResult;
}
but I need to translate it to ReactJS, and I am not getting good results
let people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];
class Login extends Component {
render () {
return (
<Grid>
<input type="text" onkeyup={this._changeInput(this.value)} />
<div id="result"></div>
</Grid>
);
}
_matchPeople = (input) => {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
_changeInput = (val) => {
var autoCompleteResult = this._matchPeople(val);
document.getElementById("result").innerHTML = autoCompleteResult;
}
}
Error in the console:
Uncaught TypeError: Cannot read property 'split' of undefined
what am I missing ?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire