javascript - 在 react 中搜索关键字列表

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] true，以及 [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>

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