список поиска по ключевым словам в реакции

Question

У меня есть вход (поиск) и список множественного выбора.Список выбора должен быть «быстрым для поиска».Ввод из поля поиска, скорее всего, будет разделен пробелом.Пример: "вещь, которую я ищу". Я хочу, чтобы единственные выбираемые опции содержали ВСЕ ключевые слова.Я попробовал 100 перестановок фильтра и карты, и, кажется, не могу этого добиться.Заранее благодарим за любую помощь.

Ниже приводится общая суть того, с чем я работаю.

this.state = {
    search:["some terms"],
    list:["terms A some","some B terms", "C some term"]
}

renderOptions = (list, search) => {
    let options
    search.forEach(term =>{
      options = term.length > 0 ? list.filter(list => list.toLowerCase().includes(term.toLowerCase())) : options
    })
    return options && options.map((option,i)=>
      <option key={i} value={option}>{option}</option>
    )
  }

handleChange = (e) => {
    this.setState({[e.target.name]:e.target.value.toLowerCase().split(' ')})
}

render(){
    ...
    <Form.Control name="search" type="text" placeholder="search terms" onChange={this.handleChange.bind(this)}/>
    <Form.Control as="select" multiple>
        { this.state.list && this.renderOptions(this.state.list,this.state.search) }
    </Form.Control>
}

Список выбора должен найти this.state.list [0]и [1] истина и [2] ложь

<select>
    <option> terms A some </option>
    <option> some B terms </option>
</select>

Answer 1

@ mbunch, я создал следующий пример с использованием компонента react-select, чтобы помочь вам обеспечить более чистый код переднего конца.

https://codesandbox.io/s/8y87l3ynll?fontsize=14

Надеюсь, это поможет

Answer 2

const courses = [
  'Economics',
  'Math II',
  'Math I'
];

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      search: []
    }
  }

  render() {
    let options;
    if (this.state.search.length) {
      const searchPattern = new RegExp(this.state.search.map(term => `(?=.*${term})`).join(''), 'i');
      options = courses.filter(option => 
        option.match(searchPattern)
      );
    } else {
      options = courses;
    }
  
    return (
      <div>
        <input type="text" onChange={(e) => this.setState({search: e.target.value.split(' ')})}/>
        <ul>
            {options.map((option, i) => 
              <li key={option+i}>{option}</li>
            )}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<SearchBar />, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Курсы, по-видимому, не определены, и параметры устанавливаются для каждого термина, переопределяющего предыдущий.Мы также можем значительно упростить использование регулярного выражения без учета регистра для фильтрации и сопоставления.