Javascript 在react中搜索关键字列表

我有一个输入搜索和多选列表。 选择列表是可快速搜索的。 搜索框中的输入可能以空格分隔。我要找的东西 我希望唯一可选择的选项包含所有关键字。 我尝试了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>
}

选择列表应发现此.state.list[0]和[1]为true，而[2]为false

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

常数课程=[ "经济学",， “数学II”， “数学我” ]; 类SearchBar扩展了React.Component{ 构造器{ 超级作物； 此.state={ 搜索：[] } } 渲染{ 让选择； 如果这是.state.search.length{ const searchPattern=new RegExpthis.state.search.mapterm=>`？=.${term}`。加入“i”； 选项=课程。过滤器选项=> option.matchsearchPattern ; }否则{ 选项=课程； } 回来 this.setState{search:e.target.value.split'}/> {options.mapoption，i=> {option} } } } ReactDOM.render，document.body 常数课程=[ "经济学",， “数学II”， “数学我” ]; 类SearchBar扩展了React.Component{ 构造器{ 超级作物； 此.state={ 搜索：[] } } 渲染{ 让选择； 如果这是.state.search.length{ const searchPattern=new RegExpthis.state.search.mapterm=>`？=.${term}`。加入“i”； 选项=课程。过滤器选项=> option.matchsearchPattern ; }否则{ 选项=课程； } 回来 this.setState{search:e.target.value.split'}/> {options.mapoption，i=> {option} } } } ReactDOM.render，document.body

---

@mbunch，我使用react-select组件创建了以下示例，以帮助您提供更干净的前端代码

---

希望这有助于

@mbunch，我使用react select组件创建了以下示例，以帮助您提供更干净的前端代码

---

希望这有帮助

使用第三方库是一种选择吗？select2和boostrap select通常是standard@Deano谢谢你的建议，我会看看的，但我希望有一些简单的反应解决方案。使用第三方库是一种选择吗？select2和boostrap select通常是standard@Deano谢谢你的建议，我会检查它，但我希望有一些简单的反应解决方案。在你的示例中，搜索，II Math返回数学II和数学I。@mbunch通过切换到正向前瞻regexp修复在你的示例中，搜索，II Math同时返回Math II和Math I。@mbunch通过切换到正向lookahead regexp进行修复感谢您花时间创建示例，但是，这不符合我的要求。在选择列表中，每个选项应包含多个单词。橙色和香蕉、猕猴桃和香蕉等。然后在搜索时，您应该能够搜索香蕉橙色，并且只返回一个包含两个关键字的选项。感谢您花时间创建示例，但是，这不符合我的要求。在选择列表中，每个选项应包含多个单词。橙色和香蕉、猕猴桃和香蕉等。然后在搜索时，您应该能够搜索香蕉橙色，并且只返回一个包含两个关键字的选项。