I'm trying to modify this code for filtering a listview's contents.
export default class App extends React.Component {
constructor(props) {
super(props);
this.list = [
{text: 'Hennessey Venom', id: 'list-01'},
{text: 'Bugatti Chiron', id: 'list-02'},
{text: 'Bugatti Veyron Super Sport', id: 'list-03'},
{text: 'SSC Ultimate Aero', id: 'list-04'},
{text: 'Koenigsegg CCR', id: 'list-05'},
{text: 'McLaren F1', id: 'list-06'},
];
this.fields = {text: 'text', id: 'id'};
this.state = {listData: this.list};
}
onKeyUp(e) {
let value = e.target.value;
const re = /^([\w\d]*)\s*(==|!=)\s*([\w\d]*)$/i;
let matches = value.match(re);
let data;
if (matches) {
let key = matches[1];
let op = matches[2];
let search_value = matches[3];
// doesn't return anything
data = new DataManager(this.state.listData).executeLocal(
new Query().search({searchKey: search_value, fieldNames: ['text'], operator: op}),
);
// original example code, doesn't return anything when run in this branch,
// despite working below in the other branch.
// data = new DataManager(this.state.listData).executeLocal(
// new Query().where('text', 'contains', value, true),
// );
} else {
// the original example, works as expected in this branch
data = new DataManager(this.state.listData).executeLocal(new Query().where('text', 'contains', value, true));
}
if (!value) {
this.setState({
listData: this.list,
});
} else {
this.setState({
listData: data,
});
}
}
render() {
return (
<div id='sample'>
<input
className='e-input'
type='text'
id='textbox'
placeholder='Filter'
onKeyUp={this.onKeyUp.bind(this)}
title='Type in a name'
/>
<ListViewComponent id='list' dataSource={this.state.listData} fields={this.fields} sortOrder='Ascending' />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
When it uses the else branch, the code runs as expected. But when I enter text == bug for example, in the box, the top branch runs but bothg the new Query and the original Query return empty arrays. I'm unsure why this is, even with the same exact Query as the else branch (shown as commented out).
I know that the regex is working correctly, as I logged the values of key, op, and search_value and they are correct.