實現組合框行為以進行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;
}