Question

我有一个输入（搜索）和一个多选择列表。选择列表将是“快速可搜索的”。搜索框的输入可能会以空格分隔。 EX：“我正在寻找的东西” 我希望唯一可选择的选项包含所有关键字。我尝试了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

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>

似乎没有定义课程，并且为每个术语设置了优先于上一个的选项。通过使用不区分大小写的正则表达式进行过滤和匹配，我们也可以大大简化。

Answer 2

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

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

希望这会有所帮助

在关键字中搜索关键词的列表

2 个答案: