如何指示在 Office FabricUI TagPicker 上为大型数据集登录/搜索？

问题描述

我正在使用 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 并产生建议？

谢谢大家。

解决方法

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

任何示例或想法将不胜感激。

,

我正在使用 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 {
...