实现组合框行为以进行react-bootstrap-typeahead

Question

我正在尝试使用react-bootstrap-typeahead控件，但是我很想尝试使其执行我想要的操作。 实际上，我的页面上有2个，其中一个正在执行真正的异步查找，而我几乎想要表现得像一个组合框。

我想要做的是选择一个项目，然后单击下拉菜单改变主意并选择另一个项目。 但是，如果您尝试这样做，则再次扩展列表时，它将自动过滤为仅所选的项目。

例如，如果我在演示页面上使用基本示例，然后选择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;
}