Angular Bootstrap: How to show no results found message in typeahead textbox results

Question

Have textboxes and typeahead functionality, I'm able search if data is available with typeahead, is there any way to show for unmatched records like "No Results Found" in typeahead pipe itself. Could you please share your suggestions. Please find attached reference screenshot of "No Results Found" message.

Stackblitz

Answer 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"];
      })
    );
  };

Answer 2

There are multiple ways to achieve this

Check this out. i have updated the example

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

This way, The No Results Found Text can be added down to your input box.

If that is also not required, add a layer of div tag and toggle it if there are no proper results found.

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

Answer 3

Much better if you just add another element underneath the input.

<span *ngIf="isNoResult">No Results Found.

Use the output typeaheadNoResults assign the value to isNoResult variable

typeaheadNoResults ? fired on every key event and returns true in case of matches are not detected.

In Your ts:

typeaheadNoResult(e){ this.isNoResult = e; }