Set multiple search filter in ReactJS - json

Question

I need help because i'm stuck in my reactjs project. I'm trying to make multiple search input box with different filter each in reactJS, but i can't achieve it with more than one filter. I tried googling it but i cannot make it work.
searchFilter = () => {
return <form>
<input name="filterTitle" type="text" value={this.state.filterTitle} onChange={this.filterList}/>
<input name="filterYear" type="text" value={this.state.filterYear} onChange={this.filterList}/>
<input name="filterReso" type="text" value={this.state.filterReso} onChange={this.filterList}/>
</form>
}
filterList = (event) => {
var items = this.state;
var updatedItems = this.state.items.filter(item => {
var filterTitle = this.state.filterTitle != "" ? item.titulo.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1 : true;
var filterYear = this.state.filterYear != "" ? item.ano.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1 : true;
var filterReso = this.state.filterReso != "" ? item.reso.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1 : true;
return filterTitle && filterYear && filterReso;
})
this.setState({ updatedItems: updatedItems });
console.log(updatedItems);
}
UPDATE 1:
new code so far, please help!
handleSearchFilter = (event) => {
const inputValue = event.target.value;
this.setState({ input: inputValue });
this.filterList(inputValue);
};
searchFilter = () => {
return <form>
<input name="filterTitle" type="text" value={this.filterTitle} onChange={(e)=>this.handleSearchFilter(e)} />
<input name="filterYear" type="text" value={this.filterYear} onChange={(e)=>this.handleSearchFilter(e)} />
<input name="filterReso" type="text" value={this.filterReso} onChange={(e)=>this.handleSearchFilter(e)} />
</form>
}
filterList = (inputValue) => {
const {items, updatedItems} = this.state;
const itemsUpdate = this.state.items.filter(item => {
var filterTitle = item.titulo.toLowerCase().indexOf(inputValue.toLowerCase()) > 1;
var filterYear = item.ano.toLowerCase().indexOf(inputValue.toLowerCase()) > 1;
var filterReso = item.reso.toLowerCase().indexOf(inputValue.toLowerCase()) > 1;
return filterTitle + filterYear + filterReso;
})
this.setState({ updatedItems: itemsUpdate });
console.log(updatedItems);
}

Answer 1

first you need to save search key seperate in state then make AND or OR comparison to retrive result like this
import React from "react";
class TestPage extends React.Component {
state = {
items: [
{
titulo: "titulo1",
ano: "ano1",
reso: "reso1",
},
{
titulo: "titulo2",
ano: "ano2",
reso: "reso2",
},
],
updatedItems: [],
filterTitle: "",
filterYear: "",
filterReso: "",
};
searchFilter = () => {
return (
<form>
<input
name="filterTitle"
type="text"
value={this.filterTitle}
onChange={(e) => this.handleSearchFilter(e, "filterTitle")}
/>
<input
name="filterYear"
type="text"
value={this.filterYear}
onChange={(e) => this.handleSearchFilter(e, "filterYear")}
/>
<input
name="filterReso"
type="text"
value={this.filterReso}
onChange={(e) => this.handleSearchFilter(e, "filterReso")}
/>
</form>
);
};
handleSearchFilter = (event, key) => {
const inputValue = event.target.value;
this.setState({ [key]: inputValue }, () => {
this.filterList();
});
};
filterList = () => {
const itemsUpdate = this.state.items.filter((item) => {
var filterTitle =
item.titulo
.toLowerCase()
.indexOf(this.state.filterTitle.toLowerCase()) > -1;
var filterYear =
item.ano.toLowerCase().indexOf(this.state.filterYear.toLowerCase()) >
-1;
var filterReso =
item.reso.toLowerCase().indexOf(this.state.filterReso.toLowerCase()) >
-1;
return filterTitle && filterYear && filterReso;
});
this.setState({ updatedItems: itemsUpdate }, () => {
console.log(this.state.updatedItems);
});
};
renderList = () => {
const { updatedItems } = this.state;
return (
<div>
{updatedItems.map((updatedItem) => {
return (
<div>
{updatedItem.titulo}
{updatedItem.ano}
{updatedItem.reso}
</div>
);
})}
</div>
);
};
render() {
return (
<div>
{this.searchFilter()}
{this.renderList()}
</div>
);
}
}
export default TestPage;

Answer 2

First of all you need to store the input values corresponding to each input in state and post that you need to filter the items array.
I assume you wish to do an AND operation on filters. IF you wish to do an OR operation just change it in the code below
handleSearchFilter = (event) => {
const {value, name} = event.target;
this.setState({ [name]: value }, () => {
this.filterList();
}); // use setState callback to now filter the list
};
searchFilter = () => {
return <form>
<input name="filterTitle" type="text" value={this.state.filterTitle} onChange={this.handleSearchFilter} />
<input name="filterYear" type="text" value={this.state.filterYear} onChange={(e)=>this.handleSearchFilter} />
<input name="filterReso" type="text" value={this.state.filterReso} onChange={this.handleSearchFilter} />
</form>
}
filterList = () => {
const {items, updatedItems, filterTitle, filterYear, filterReso} = this.state;
const itemsUpdate = this.state.items.filter(item => {
var filterTitleRes = item.titulo.toLowerCase().indexOf(filterTitle.toLowerCase()) > 1;
var filterYearRes = item.ano.toLowerCase().indexOf(filterYear.toLowerCase()) > 1;
var filterResoRes = item.reso.toLowerCase().indexOf(filterReso.toLowerCase()) > 1;
return filterTitleRes && filterYearRes && filterResoRes;
// Change the above condition to or if you wish to do an OR check
})
this.setState({ updatedItems: itemsUpdate });
console.log(itemsUpdate);
}

Answer 3

You can use js-search for optimized searching across multiple keys in JSON object.
In your case, you can simply create a smaller JSON array where you only store keys in which you want to search for example
import * as JsSearch from 'js-search';
var theGreatGatsby = {
isbn: '9781597226769',
title: 'The Great Gatsby',
author: {
name: 'F. Scott Fitzgerald'
},
tags: ['book', 'inspirational']
};
var theDaVinciCode = {
isbn: '0307474275',
title: 'The DaVinci Code',
author: {
name: 'Dan Brown'
},
tags: ['book', 'mystery']
};
var angelsAndDemons = {
isbn: '074349346X',
title: 'Angels & Demons',
author: {
name: 'Dan Brown',
},
tags: ['book', 'mystery']
};
var search = new JsSearch.Search('isbn');
search.addIndex('title');
search.addIndex(['author', 'name']);
search.addIndex('tags')
search.addDocuments([theGreatGatsby, theDaVinciCode, angelsAndDemons]);
search.search('The'); // [theGreatGatsby, theDaVinciCode]