javascript - NgBootstrap Typehead, how to get "No Result found" message for invalid string

Question

Have functionality like, need to get typeahead functionality for the valid data, this is working fine. But could you please suggest me how to get No Results found message for invalid string. And if we didn't select from typeahead(manually entered value should be show blank if we are not selecting from typeahead), can we show it like blank in textbox. Here is my sample code,

 subAccountItemObservable: Observable<any>;
 asyncAccountValue: string;
   this.subAccountItemObservable = new Observable((observer) => {
      observer.next(this.asyncAccountValue);
    }).mergeMap((token: string) =>{
      const test1 = (document.getElementById('idTest') as HTMLInputElement).value;
       return this.http.get('/testAPI/getTestAPIRecords',{params: {param1: param1}});
    });

HTML:

<div class="col-sm-1">
    <input
      id="idsubAccountItemObservable"
      [(ngModel)]="asyncAccountValue"
      [ngModelOptions]="{ standalone: true }"
      [typeahead]="subAccountItemObservable"
      (typeaheadLoading)="changeTypeaheadLoading($event)"
      (typeaheadOnSelect)="typeaheadOnSelect($event)"
      class="form-control searchInput"
      placeholder="Sub Account"
      required
    />
  </div>

Can we get "No Results Found" for invalid string ?

question from:https://stackoverflow.com/questions/65872833/ngbootstrap-typehead-how-to-get-no-result-found-message-for-invalid-string

Answer 1

Use resultTemplate to show your own template

component.ts

constructor(private _service: WikipediaService) {}

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => (this.searching = true)),
      switchMap(term =>
        this._service.search(term).pipe(
          map((x: any) => {
            if (x.length > 0) {
              this.searchFailed = false;
              return x;
            } else {
              this.searchFailed = true;
              return ["No Results Found"];
            }
          })
        )
      ),
      tap(() => (this.searching = false))
    );

  formatter = x => x;

  typeaheadOnSelect(evt: NgbTypeaheadSelectItemEvent) {
    if (evt.item == "No Results Found") {
      evt.preventDefault();
    }
  }

component.html

<ng-template #rt let-r="result" let-t="term">
  <ngb-highlight *ngIf="!searchFailed" [result]="r" [term]="t"></ngb-highlight>
  <button class="d-button ngb-highlight" *ngIf="searchFailed" disabled>
    No Record Found
  </button>
</ng-template>

<label for="typeahead-template">Search for a state:</label>
<input
  id="typeahead-template"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  [ngbTypeahead]="search"
  [resultTemplate]="rt"
  (selectItem)="typeaheadOnSelect($event)"
  [inputFormatter]="formatter"
/>

here the working stackblitz demo:

https://stackblitz.com/edit/angular-s3wzr3-vxfppg?file=src/app/typeahead-template.html

Hope this helps :)