search list for keywords in react

Question

I have an input (search) and a multi select list. The select list is to be "quick searchable". The input from the search box will likely be space delimited. EX: "thing im looking for" I want the only selectable options to contain ALL keywords. I have tried 100 permutations of filter and map, and can not seem to make this happen. Thanks in advance for any and all help.

The following is the general gist of what I am working with.

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>
}

The select list should find this.state.list[0] and [1] true, and [2] false

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

Answer 1

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>

课程似乎没有定义，并且正在为每个学期设置选项，覆盖前一个学期。我们还可以通过使用不区分大小写的正则表达式进行过滤和匹配来大大简化。