Recommand · July 31, 2021 0

Searching for partial string in ReactJS

I am new to react and have inherited an application that i need to understand while having to make some modifications.
The issue here is that, when a person search for "Micro" only a list of Micro is returned, when the expectation is that Microsoft and any other company that includes the term Micro will be returned, how do i accomplish this?

here’s my code for searchResult component

import React, {Component} from 'react';
import {PaginationControl} from "./PaginationControl";
import {SearchTable} from "./SearchTable";
import {Row, Col} from "reactstrap";
import './Search.css';

export class SearchResults extends Component {
    static defaultProps = {
        pageSize: 20
    }

    constructor(props) {
        super(props);
        this.state = {
            search: '',
            sort: null,
            filters: {},
            results: {
                items: [],
                page: 0,
                total: 0,
            },
            collection: 'software'
        };
    }

    componentDidUpdate(prevProps) {
        if ((prevProps.search !== this.props.search) ||
            (prevProps.collection !== this.props.collection) ||
            (prevProps.filters !== this.props.filters)) {
            this.search(0);
        }
    }

    async search(page) {
        let search = this.props.search;
        let collection = this.props.collection;
        if (search === null) {
            this.setState({
                results: {
                    items: [],
                    page: 0,
                    total: 0,
                },
                search: search,
            })
        } else {
            const request = {
                "search": search,
                "page" : page,
                "pageSize" : this.props.pageSize,
                "filter": this.props.filters,
                "sort": this.props.sort
            }
            let myCallback = this.setState.bind(this);
            fetch('search/product/' + collection,
                {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(request)
                }).then(function(response) {
                return response.json();
            }).then(function(data) {
                myCallback({results: data, search: search, collection: collection, loading: false});
            });
        }
    }

    selectPage(newPage) {
        this.search(newPage).then();
    }

    render() {
        return (
            <div>
                <Row style={{ padding: 10}}>
                    <Col>
                        <b>Search:</b> "<i>{this.state.search}</i>"
                        (TotalHits: {this.state.results.total})
                    </Col>
                    <Col md="auto">
                        <PaginationControl className="my-pagination" page={this.state.results.page}
                                           pageSize={this.props.pageSize} total={this.state.results.total}
                                           pageHandler={p => this.selectPage(p)}/>
                    </Col>
                </Row>

                <SearchTable data={this.state.results.items}
                             cart={this.props.cart}
                             cartHandler={this.props.cartHandler}
                             actions={['add', 'copy']}/>
                             
            </div>
        );
    }

}

This is the SearchTable component

import React, {Component} from 'react';
import {SearchRow} from './SearchRow';
import {ProductDetails} from './ProductDetails'

// Implementation of the Search Table
// To use <SearchTable data={results}></SearchTable>

export class SearchTable extends Component {

    constructor(props) {
        super(props);
        this.state = {
            modal: false,
            inspectRow: null
        };
    }

    
    render() {
        let results = this.props.data;
        return (
            <div>  
            <table className='table table-striped' aria-labelledby="tableLabel">
                    <tbody>
                    {results?.map(row => <SearchRow key={row.bdnaId}
                                                    data={row}
                                                    onInspect={(r) => this.setState({modal: true, inspectRow: r})}
                                                    actions={this.props.actions}
                                                    cartHandler={this.props.cartHandler}/>)}
                    </tbody>
                </table>
                <ProductDetails modal={this.state.modal} toggleModal={() => this.setState({modal: !this.state.modal})} row={this.state.inspectRow}/>
            </div>
        );
    }

}