实现react-bootstrap-typeahead的组合框行为 [英] Achieve combobox behavior for react-bootstrap-typeahead

问题描述

我正在尝试使用 react-bootstrap-typeahead 控件，但我很想让它做我想做的事。我实际上在我的页面上有两个，其中一个是真正的异步查找，另一个我几乎想表现得像一个组合框。

什么我希望能够做的是选择一个项目，然后点击下拉列表改变我的想法并选择另一个项目。但是，如果您尝试这样做，当您再次展开列表时，它会自动过滤为您选择的项目。

例如，如果我在

解决方案

是的，这是可能的。 filterBy 道具可以采用自定义功能，允许您根据需要过滤结果。因此，根据您链接的示例，您需要按照以下方式执行操作：

 < Typeahead 
 filterBy = {（option，text）=> {
 if（this.state.selected.length）{
 //如果有选择，则显示所有选项。 
返回true; 
} 
 //否则按某些条件过滤。 
返回option.name.toLowerCase（）。indexOf（text.toLowerCase（））！== -1; 
}} 
 labelKey =name
 onChange = {（selected）=> this.setState（{selected}）} 
 options = {options} 
 placeholder =选择州......
 selected = {this.state.selected} 
 / > 
  

更新
自v3.0.0起， filterBy callback传递 props 而不是 text ：

 （选项，道具）=> {
 if（props.selected.length）{
 //如果有选择，则显示所有选项。 
返回true; 
} 
 //否则按某些条件过滤。 
返回option.name.toLowerCase（）。indexOf（props.text.toLowerCase（））！== -1; 
} 
  

I'm trying to use the react-bootstrap-typeahead control but I'm struck trying to make it do what I want. I've actually got 2 of these on my page, one of which is doing a true async lookup, and one which I almost want to behave like a combobox.

What I'd like to be able to do is to select an item, then click the dropdown to change my mind and choose another item. However if you try this, when you expand the list again it's automatically filtered to just the item you have selected.

For example if I use the basic example on the demo page, and select Alabama, clicking the input now only displays Alabama and none of the other choices. I'd like this to ideally return me to the full list (is this possible?).

解决方案

Yes, it's possible. The filterBy prop can take a custom function, allowing you to filter results however you want. So building off the example you linked to, you'd want to do something along these lines:

<Typeahead
  filterBy={(option, text) => {
    if (this.state.selected.length) {
      // Display all the options if there's a selection.
      return true;
    }
    // Otherwise filter on some criteria.
    return option.name.toLowerCase().indexOf(text.toLowerCase()) !== -1;
  }}
  labelKey="name"
  onChange={(selected) => this.setState({selected})}
  options={options}
  placeholder="Choose a state..."
  selected={this.state.selected}
/>

Update As of v3.0.0, the filterBy callback passes props instead of text:

(option, props) => {
  if (props.selected.length) {
    // Display all the options if there's a selection.
    return true;
  }
  // Otherwise filter on some criteria.
  return option.name.toLowerCase().indexOf(props.text.toLowerCase()) !== -1;
}

这篇关于实现react-bootstrap-typeahead的组合框行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！