设置blueprintjs建议元素中的元素个数

Setting the number of elements in blueprintjs Suggest element

我正在使用 blueprintjs 可视化工具包开发一个 React 应用程序。然而,问题是,与文档中显示的示例不同,我的 <Suggest> 框将显示数组中的所有元素,而不是前 10 个元素。我当前的代码:

                        <Suggest
                        items={this.props.documentTypes}
                        itemRenderer={(items, meta) => {
                            if (meta.modifiers.matchesPredicate) {
                                return (
                                    <MenuItem
                                        label={items[1]}
                                        key={items[0]}
                                        text={items[1]}
                                        onClick={meta.handleClick}
                                    />
                                );
                            } else {
                                return null;
                            }
                        }}
                        itemPredicate={(query, item) => {
                            let result =
                                `${item[0].toLowerCase()} ${item[1].toLowerCase()}`.indexOf(
                                    query.toLowerCase()
                                ) >= 0;
                            return result;
                        }}
                        inputValueRenderer={item => item[1]}
                        noResults={
                            <MenuItem
                                disabled={true}
                                text="No document types found."
                            />
                        }
                        onItemSelect={this.changeDocType}
                        popoverProps={{ popoverClassName: Classes.MINIMAL }}
                    />

有没有办法指定显示多少个元素?我在文档中找不到此设置。

我认为您可以使用 itemListPredicate 而不是 itemPredicate。然后使用 .filter().slice()。像这样...

<Suggest
  itemListPredicate={(query, items) => {
    return items.filter((item) => `${item[0].toLowerCase()} ${item[1].toLowerCase()}`.indexOf(query.toLowerCase()) >= 0).slice(0, 10)
  }}
/>