实现react-bootstrap-typeahead的组合框行为

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

我想要做的是选择一个项目，然后单击下拉菜单改变我的想法并选择另一个项目。但是，如果您尝试这样做，当您再次展开列表时，它会自动过滤为仅显示您选择的项目。

例如，如果我使用基本示例演示页面，然后选择Alabama，点击输入现在只显示Alabama并且没有其他选择。理想情况下，我希望这能让我回到完整列表（这可能吗？）。

是的，这是可能的。这filterByprop 可以采用自定义函数，允许您根据需要过滤结果。因此，根据您链接到的示例，您需要按照以下方式做一些事情：

<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从 v3.0.0 开始，filterBy回调传递props代替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;
}