Введите поиск вперед в таблицах реагирования JS - PullRequest
Новая
       10

Введите поиск вперед в таблицах реагирования JS

0 голосов
/ 28 января 2019

У меня есть таблица, которая выглядит как 

<UserTabel dataList={this.props.dataList} />

И 

<div className="table-responsive">
        <table className="table table-hover" id="job-table">
          <thead>
            <tr className="text-center">
              <th scope="col" className="wc-30">Sr.No.</th>
              <th scope="col">Company Name</th>
              <th scope="col">Technology</th>
              <th scope="col">Title</th>
            </tr>
          </thead>
          <tbody className="text-center">
            {this.props.data && this.props.dataList.content && this.props.dataList.content.length > 0 && this.props.dataList.content.sort((a, b) => b.createdAt - a.createdAt).map((item, key) => {
              return (
                <tr key={key}>
                  <td className="font-weight-bold wc-30">{key + 1}</td>
                  <td>{item.technology}</td>
                  <td className="font-weight-bold">17</td>
                  <td title={item.title} className="jd-name-container justify-content-center align-items-center">
                    <div className="jdName">{item.jdName}</div>
                    {(key + 1 === 1) && <div className="badge new-badge badge-warning-custom">New</div>}
                  </td>
                  <td className="font-weight-bold">30</td>
                  <td className="font-weight-bold">30</td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    )

Теперь данные, которые у меня есть, похожи на этот формат. 

this.props.datalist = {
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "companyId": null,
        "title": "Senior/ Lead UI Developer",
        "jobDescription": null,
        "technology": "java"
    },{
        "id": "5b7d4a566c5fd005075011",
        "companyId": null,
        "title": "ead UI Developer",
        "jobDescription": null,
        "technology": "angular"
    }]
}

Теперь, в этом Сейчас, у меня есть одно поле ввода, 

 <input type="text"
                id="searchJob"
                className="form-control-sm border-0 flex-grow-1"
                placeholder="Company Name / Technology / Job title" />
              <i className="fa fa-search search-job"></i>
            </div>

Теперь, вот что я пытаюсь сделать, как только пользователь наберет в этом onChange, мне нужно искать в dataList в двухКритерии, которые Title and Technology, то мне нужно показать пользователю только эту строку для пользователя.

Итак, есть ли способ, которым я могу сделать это?

Заранее спасибо.Любая вещь будет полезна

1 Ответ

0 голосов
/ 28 января 2019

Что вы можете сделать, это создать функцию, подобную getDataList (), которая фильтрует данные по заданным критериям.Критерии могут затем использовать ваш введенный текст.Наконец, используйте созданную функцию, чтобы заполнить данные для вашей таблицы. 

constructor(props) {
  super(props);
  this.state = {enteredText: null};
}

function onChange(newText) {
  this.setState({enteredText: newText});
} 

function getDataList() {
  return this.props.datalist.content.filter(c => (c.title === this.state.enteredText || c.technology === this.state.enteredText));
}
...