实现react-bootstrap-typeahead

Question

我正在尝试使用react-bootstrap-typeahead控件，但我很想让它做我想做的事。我实际上在我的页面上有两个这样的，其中一个正在进行真正的异步查找，而且我几乎想要像组合框一样。

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

例如，如果我使用demo page上的基本示例，并选择Alabama，则现在单击输入仅显示 Alabama ，而不显示其他任何选项。我想这样理想地让我回到完整列表（这可能吗？）。

Answer 1

是的，这是可能的。 filterBy道具可以采用自定义功能，允许您根据需要过滤结果。所以建立你所链接的例子，你想要沿着这些方向做点什么：

<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}
/>

<强>更新 自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;
}