I am trying to filter my field while tying in input field as in autocomplete
.I do like this but it not filter my list
here is my code
onChangeHandler(e){
console.log(e.target.value);
var newArray = this.state.users.map((d)=>{
return d.indexOf(e.target.value) !== -1
});
console.log(newArray)
this.setState({
users:newArray
})
}
http://codepen.io/anon/pen/zNYGzb?editors=1010
But none of these options actually filter as you type (i.e., show you the filtered data dynamically while you’re typing). Something as shown below: Although there is no inbuilt filter feature to do this, you can easily create something like this in Excel.
Turn off the Design Mode by clicking Developer > Design Mode. From now on, the table list will be searched and filtered instantly based on the entered value in the text box.
The first step is to insert a text box where you can type a text string and it will use it to filter the data (while you’re typing). Below are the steps to insert the text box: In the Control group, click on Insert. Place the cursor anywhere in the worksheet, click and drag. This will insert a text box in the worksheet.
If we’re going to filter a list, the first thing we need is to show a list. This is easy enough to achieve: We’ve just got an array of strings representing different fruit, and we’re using the JavaScript map () function to render each item within a list. The list is rendered, but we get a warning about a missing key.
You can do something like this:
class First extends React.Component {
constructor(){
super();
this.state ={
users: ['abc',"pdsa","eccs","koi"],
input: '',
}
}
onChangeHandler(e){
this.setState({
input: e.target.value,
})
}
render (){
const list = this.state.users
.filter(d => this.state.input === '' || d.includes(this.state.input))
.map((d, index) => <li key={index}>{d}</li>);
return (<div>
<input value={this.state.input} type="text" onChange={this.onChangeHandler.bind(this)}/>
<ul>{list}</ul>
</div>)
}
}
ReactDOM.render(<First/>,document.getElementById('root'));
This is essentially expanding on what you had, and what you had was close. You could also choose to apply the filter within the changeHandler if you want, but I prefer to do it "later" if possible, in case you want to later add other filters or whatnot.
Your code is also fine, you just need to change .map to .filter method in your code and everything will work. Map method does not filter it just returns a new value for each element, which you were passing a boolean. Whereas you actually wanted to filter the list.
onChangeHandler(e){
console.log(e.target.value);
var newArray = this.state.users.filter((d)=>{
return d.indexOf(e.target.value) !== -1
});
console.log(newArray)
this.setState({
users:newArray
})
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With