如何在 Office FabricUI TagPicker 上为大型数据集指示 loaging/searching？

Question

我正在使用 TagPicker 动态获取数据并显示一组与该词匹配的结果。问题是查看文档没有明确指示如何确定组件数据正在加载或搜索。具有这些的接口已被删除 (ISuggestionsProps)，并且 loadingText 道具似乎对我不起作用，或者我可能使用错误。

以下是我如何将列表中的数据加载到标签选择器中的方法：

const filterSuggestedTags = async (filterText: string, tagList: ITag[]) => {
    //* possibly here to call an api if needed?
    if (filterText) {
      const url = 'url'
      const resp = await fetch(url,{method:'GET',headers:{Accept:'application/json; odata=verbose'}})
      return (await resp.json()).d.results.map(item => ({ key: item, name: item.Title }));
    } else return []
  };

代码笔： https://codepen.io/deleite/pen/MWjBMjY?editors=1111

这显然有很多问题，首先也是最糟糕的是每次击键都是一个承诺。那么，问题是如何使用搜索词调用 api 并得到建议？

谢谢大家

Answer 1

好的，你可以使用道具 'resolveDelay' 来缓解这个问题，但我仍然没有找到任何标准的方法来处理来自 api 的项目，这是我最接近的。

如有任何示例或想法，我们将不胜感激。

Answer 2

我正在使用 Office ui Fabric React v5（“office-ui-fabric-react”：“^5.135.5”）。我正在使用 TagPicker 加载外部 API 数据（解析时间长，数据集大）。加载建议延迟 700 毫秒（按下按键后）。输入 3 个字符后会触发加载建议。在加载过程中可以看到加载圆圈。我在页面中加载 20 个建议的建议，如果底部有更多项目要加载，则加载更多锚点加载另一个页面并向已加载的新建议添加。我必须扩展 IBasePickerSuggestionsProps 接口以获得 moreSuggestionsAvailable?: boolean; BasePicker.types.d.ts 基于这个问题：https://github.com/microsoft/fluentui/issues/6582

文档：https://developer.microsoft.com/en-us/fluentui#/components/pickers

代码笔：https://codepen.io/matej4386/pen/ZEpqwQv

这是我的代码：

const {disabled} = this.props;
const {
selectedItems,
    errorMessage
} = this.state;   
<TagPicker 
onResolveSuggestions={this.onFilterChanged}
getTextFromItem={this.getTextFromItem}
resolveDelay={700}
pickerSuggestionsProps={{
    suggestionsHeaderText: strings.suggestionsHeaderText,
    noResultsFoundText: strings.noresultsFoundText,
    searchForMoreText: strings.moreSuggestions,
    moreSuggestionsAvailable: this.state.loadmore
}}
onGetMoreResults={this.onGetMoreResults}
onRenderSuggestionsItem={this.onRenderSuggestionsItem}
selectedItems={selectedItems}
onChange={this.onItemChanged}
itemLimit={1}
disabled={disabled}
inputProps={{
    placeholder: strings.TextFormFieldPlaceholder
}} 
/>
private onFilterChanged = async (filterText: string, tagList:IPickerItem[]) => {
if (filterText.length >= 3) {
  let resolvedSugestions: IPickerItem[] = await this.loadListItems(filterText);

  const {
    selectedItems
  } = this.state;

  // Filter out the already retrieved items, so that they cannot be selected again
  if (selectedItems && selectedItems.length > 0) {
    let filteredSuggestions = [];
    for (const suggestion of resolvedSugestions) {
      const exists = selectedItems.filter(sItem => sItem.key === suggestion.key);
      if (!exists || exists.length === 0) {
        filteredSuggestions.push(suggestion);
      }
    }
    resolvedSugestions = filteredSuggestions;
  }
  if (resolvedSugestions) {
    this.setState({
      errorMessage: "",
      showError: false,
      suggestions: resolvedSugestions,
      loadmore: true,
      loadMorePageNumber: 1
    });

    return resolvedSugestions;
  } else {
    return [];
  }
} else {
  return null
}
}
private onGetMoreResults = async (filterText: string, selectedItems?: any[]): Promise<IPickerItem[]> => {
let arrayItems: IPickerItem[] = [];
try {
  
    let listItems: IOrganization[] = await this.GetOrganizations(this.Identity[0].id, filterText, 1);
  ...
private loadListItems = async (filterText: string): Promise<IPickerItem[]> => {
let { webUrl, filter, substringSearch } = this.props;
let arrayItems: IPickerItem[] = [];

try {
...

如何在 Office FabricUI TagPicker 上为大型数据集指示 loaging/searching？

how to indicate loaging/searching on Office FabricUI TagPicker for large data sets?

javascript

sharepoint

reactjs

fluentui-react