Display error message if no result found in search bar

user_12923479 0
Viewed 543

I am stuck in search problem. If the user search for something and that is not present in list than it should display error message. But in my case, If I search "panadol" in my list than it will display the list which contains this word and will display the error message on the list which does not contain this word.

Searchbar.html:

<ion-searchbar (keyup)="searching()" placeholder="{{'search' | translate}}" [(ngModel)]="terms"></ion-searchbar>

<div *ngIf="terms == undefined || (terms.length > 1 && !((infectiousdiseasesList.DiseaseCategoryId == 4) && (infectiousdiseasesList.DiseaseName_En.toUpperCase().includes(terms.toUpperCase()) || infectiousdiseasesList.DiseaseName_Ar.includes(terms))) )">
{{'noItemsFound' | translate}}
</div>

<span *ngFor="let infectious of infectiousdiseasesList;let i = index">
  <ion-row
    *ngIf=" (infectious.DiseaseCategoryId == 4) && (infectious.DiseaseName_En.toLowerCase().includes(terms.toLowerCase()) || infectious.DiseaseName_Ar.includes(terms))"
    col-12>
    <!-- (infectious.DiseaseCategoryId == 4) && -->
    <ion-col col-6>
      <ion-item no-lines>
        <ion-label *ngIf="this.lang == 'en'">{{infectious.DiseaseName_En}}</ion-label>
        <ion-label *ngIf="this.lang == 'ar'">{{infectious.DiseaseName_Ar}}</ion-label>
        <ion-checkbox [(ngModel)]="infectious.checked" (ionChange)="selected(infectious,i, $event)" color="danger">
        </ion-checkbox>
      </ion-item>
    </ion-col>
  </ion-row>
</span>

Searchbar.ts:

this.storage.get('infectiousDiseases').then(res => {
    for(let infectious of res){
      if(infectious.DiseaseCategory.Id==4){
        this.infectiousdiseasesList.push(infectious);
      }
    }
 });

Now if you see the picture there is a list shown there. If I type "as" in the searchbar then the list containing "as" words will be shown and the list that does not contain the searched word will shown error message. In my case, I am getting error message and result too.

ionic3 angular
1 Answers

Just add a opposite condition in the result display.

<div *ngIf="terms == undefined || (terms.length > 1 && !((infectiousdiseasesList.DiseaseCategoryId == 4) && (infectiousdiseasesList.DiseaseName_En.toUpperCase().includes(terms.toUpperCase()) || infectiousdiseasesList.DiseaseName_Ar.includes(terms))) )">
{{'noItemsFound' | translate}}
</div>
<div *ngIf="terms != undefined && ((infectiousdiseasesList.DiseaseCategoryId == 4) && (infectiousdiseasesList.DiseaseName_En.toUpperCase().includes(terms.toUpperCase()) && infectiousdiseasesList.DiseaseName_Ar.includes(terms))">
<span *ngFor="let infectious of infectiousdiseasesList;let i = index">
  <ion-row
    *ngIf=" (infectious.DiseaseCategoryId == 4) && (infectious.DiseaseName_En.toLowerCase().includes(terms.toLowerCase()) || infectious.DiseaseName_Ar.includes(terms))"
    col-12>
    <!-- (infectious.DiseaseCategoryId == 4) && -->
    <ion-col col-6>
      <ion-item no-lines>
        <ion-label *ngIf="this.lang == 'en'">{{infectious.DiseaseName_En}}</ion-label>
        <ion-label *ngIf="this.lang == 'ar'">{{infectious.DiseaseName_Ar}}</ion-label>
        <ion-checkbox [(ngModel)]="infectious.checked" (ionChange)="selected(infectious,i, $event)" color="danger">
        </ion-checkbox>
      </ion-item>
    </ion-col>
  </ion-row>
</span>

or simple way: 

<ion-searchbar (keyup)="searching()" placeholder="{{'search' | translate}}" [(ngModel)]="terms"></ion-searchbar>

    <div *ngIf="terms == undefined || (terms.length > 1 && !((infectiousdiseasesList.DiseaseCategoryId == 4) && (infectiousdiseasesList.DiseaseName_En.toUpperCase().includes(terms.toUpperCase()) || infectiousdiseasesList.DiseaseName_Ar.includes(terms))) )">
    {{'noItemsFound' | translate}}
    </div>
    <div *ngIf="terms != undefined && infectiousdiseasesList">
    <span *ngFor="let infectious of infectiousdiseasesList;let i = index">
      <ion-row
        *ngIf=" (infectious.DiseaseCategoryId == 4) && (infectious.DiseaseName_En.toLowerCase().includes(terms.toLowerCase()) || infectious.DiseaseName_Ar.includes(terms))"
        col-12>
        <!-- (infectious.DiseaseCategoryId == 4) && -->
        <ion-col col-6>
          <ion-item no-lines>
            <ion-label *ngIf="this.lang == 'en'">{{infectious.DiseaseName_En}}</ion-label>
            <ion-label *ngIf="this.lang == 'ar'">{{infectious.DiseaseName_Ar}}</ion-label>
            <ion-checkbox [(ngModel)]="infectious.checked" (ionChange)="selected(infectious,i, $event)" color="danger">
            </ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>
    </span>
</div>

and:

    this.storage.get('infectiousDiseases').then(res => {
      if(res){
         for(let infectious of res){
          if(infectious.DiseaseCategory.Id==4){
            this.infectiousdiseasesList.push(infectious);
          }
        }
      } else {
          this.infectiousdiseasesList = []; // [] or maybe null 
      }     
 });
user_106850010
Related