使用react-bootstrap-typeahead对多个数据集进行分组

我正在尝试使用旧的 jQuery typeahead 和react-bootstrap-typeahead 来复制搜索字段。它查询使用多个异步数据源，并显示按此类源的返回分组的结果。

例如，如图所示，通过输入字母“b”，它会查询地址数据库以及用户之前搜索的值（保存在 React 存储中），并显示按每个数据库分组的结果。如果给定数据库的结果为空，则不会显示，如下例所示：

根据该项目的这个已关闭问题 https://github.com/ericgio/react-bootstrap-typeahead/issues/603可以查询多个数据库，对多个数据库进行多次查询onSearch功能。但是是否可以像上面的示例一样对结果进行分组？

是的，可以按照您描述的方式对搜索结果进行分组。您可以使用renderMenuprop 按数据源对结果进行分组并呈现菜单标题来表示每个源。

这是改编自活生生的例子 http://ericgio.github.io/react-bootstrap-typeahead/#rendering:

const renderMenu = (results, menuProps, props) => {
  let index = 0;

  // Group the results by the "region" key in each option.
  const regions = groupBy(results, 'region');
  const items = Object.keys(regions)
    .sort()
    .map((region) => {
      return (
        <React.Fragment key={region}>
          {index !== 0 && <Menu.Divider />}
          <Menu.Header>{region}</Menu.Header>
          {regions[region].map((option) => {
            const item = (
              <MenuItem key={option.label} option={option} position={index}>
                <Highlighter search={props.text}>{option.label}</Highlighter>
              </MenuItem>
            );

            index += 1;
            return item;
          })}
        </React.Fragment>
      );
    });

  return <Menu {...menuProps}>{items}</Menu>;
};

const GroupedResults = () => {
  return (
    <Typeahead
      id="grouped-results"
      options={options}
      placeholder="Choose a state..."
      renderMenu={renderMenu}
    />
  );
};

这是工作沙箱 https://codesandbox.io/s/distracted-aryabhata-8uyy1v.

就数据源而言，请注意，预先输入组件本质上对此是不可知的；它只是过滤传入的数组optionsprop，它可以来自任何地方，甚至多个地方。