Angular Bootstrap：如何在预先输入的文本框结果中显示未找到结果消息答案

【问题标题】：Angular Bootstrap: How to show no results found message in typeahead textbox resultsAngular Bootstrap：如何在预先输入的文本框结果中显示未找到结果消息
【发布时间】：2021-03-25 20:54:39
【问题描述】：

具有文本框和预输入功能，我可以搜索预输入数据是否可用，有没有办法在预输入管道本身中显示不匹配的记录，例如“未找到结果”。您能否分享您的建议。请查看随附的“未找到结果”消息的参考截图。

Stackblitz

【问题讨论】：

标签： javascript jquery angular bootstrap-4 ng-bootstrap

【解决方案1】：

  public search = (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => {
        if (term.length < 2) {
          return [];
        }
        const searchResults = states
          .filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
          .slice(0, 10);
        return searchResults.length > 0 ? searchResults : ["No Results found"];
      })
    );
  };

【讨论】：

【解决方案2】：

有多种方法可以实现这一点

看看这个。我已经更新了示例

https://stackblitz.com/edit/ngb-typeahead-blut-not-updatoing-way-1?file=app/typeahead-basic.html

这样，“未找到结果”文本可以添加到您的输入框中。

如果也不需要，添加一层 div 标签，如果没有找到合适的结果，则切换它。

https://stackblitz.com/edit/ngb-typeahead-blut-not-updatoing-way-2?file=app/typeahead-basic.html

【讨论】：