Как включить автоматическое предложение в поисковый запрос, используя реагировать

Question

У меня уже полностью введен поисковый ввод.Этот поиск получает данные из базы данных и отвечает на основе ввода пользователя.Моя цель состоит в том, чтобы включить автозаполнение во входные данные, пока таблица корректируется.

Я начал тянуть поля, из которых будут поступать предложения, но застрял, пытаясь выяснить, как добавить предложение в поле ввода для поиска.

    constructor(props) {
        super(props);

        this.state = {
            data: [],    
            pageOfItems: [],            
            sort: {
                column: null,
                direction: 'desc',
            },
        }
        this.clearSearch = this.clearSearch.bind(this);
        this.doSearch = this.doSearch.bind(this);        
    }
    componentDidMount() {
        this.props.getJobs() 
            .then((res) => {
                this.setState({
                    data: res.results.response || []
                })
            });

    }
    clearSearch() {
        this.props.getJobs()
            .then((res) => {
                this.setState({
                    data: res.results.response || [],              
                    sort: {
                        column: null,
                        direction: 'desc',
                    }
                })
            });
    }

/*-- the function that populates the search results. --*/
    doSearch(e) {
        const { name, value } = e.target;        
        this.setState({ [name]: value });    
        const { data } = this.state; 

        const searchList = data.map((dt) => { return [dt.Name, dt.Logs]; }); <--- Where I filtered out the columns I want the search to occur.       

        if (value.length === 0) {
            this.props.getJobs()
                .then((res) => {
                    this.setState({
                        data: res.results.response || [],
                        sort: {
                            column: null,
                            direction: 'desc',
                        }
                    })
                });
        } else {
            this.props.doSearch(value)
                .then((res) => {
                    this.setState({
                        data: res.results.response || [],
                        sort: {
                            column: null,
                            direction: 'desc',
                        }
                    })
                });
        }
    } 

    render() {
        const { data, Search, pageOfItems } = this.state; 
        const { jobRun } = this.props;

         return data.length > 0 ? (
            <div className="row row-centered">
                 <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-centered">
                      <div id="Search" className="row col-xs-6 col-lg-3">                         
                        <div className="input-group row">
                             <input className='form-control searchItems' type="text" placeholder="Search" name="Search" onChange={this.doSearch} autoFocus />                          
                             <button type="button" className="btn btn-outline-danger btn-sm" onClick={this.clearSearch} >Reset Search</button>
                        </div>
                    </div>
                    <table className="table table-striped">
                        <thead>                            
                             <tr>
                                 <th onClick={() => this.doSort('name')}>Name</th>
                                 <th onClick={() => this.doSort('date')}>Date Ran</th>
                                 <th onClick={() => this.doSort('job')}>Job</th>
                                 <th onClick={() => this.doSort('start')}>Start</th>
                                 <th onClick={() => this.doSort('end')}>End</th>
                                 <th onClick={() => this.doSort('status')}>Status</th>
                                <th></th>
                                 <th></th>
                                 <th></th>
                            </tr>
                        </thead>
                <tbody>
                    {
                                 pageOfItems.map((dt) => {
                            return (
                                <tr key={dt.ID}>                                 
                                    <td>{dt.Name}</td>
                                    <td><Moment format="YYYY/MM/DD">{dt.DateRan}</Moment></td>
                                    <td><ShowJobName>{dt.Job}</ShowJobName></td>
                                    <td><Moment format="YYYY/MM/DD HH:mm">{dt.Start}</Moment></td>
                                    <td><Moment format="YYYY/MM/DD HH:mm">{dt.End}</Moment></td>
                                    { dt.Status ?
                                        <td>
                                            <div className="alert alert-success" role="alert"></div>
                                        </td>
                                   :                                      
                                        <td>
                                            <div className="alert alert-danger" role="alert"></div>
                                        </td>
                                    }
                                    <td><button type="button" className="btn btn-primary" onClick={()=>this.runLog(dt.ID)}>Run Job</button></td>                                    
                                   </tr>                               
                            );
                        })
                    }
                </tbody>
                     </table> 
                     <JwPagination items={data} pageSize="20" onChangePage={this.onChangePage} />
                </div> 
            </div>
        ) :
            <div className="row">
                 <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                     <div className="input-group row">
                         <input className='form-control searchItems' type="text" placeholder="Search" name="Search" value={Search} onChange={this.doSearch} autoFocus />
                         <button type="button" className="btn btn-outline-danger btn-sm" onClick={this.clearSearch} >Reset Search</button>
                     </div>
                    <p>No Data to Display at the moment</p>
                </div>
            </div>;
        }
}

Моя цель состоит в том, чтобы иметь адаптивное автозаполнение, которое заполняется одновременно с результатами в таблице.