Common Search Page with Ionic 5 Search-bar [ Full Example ]

Today, we are going to build a search page with ionic search-bar where we can search for anything and it stores our recent searches also.

The idea behind this is just to create a modal page which we can call whenever we need to search for anything on the app from any page of the ionic app.

We will use here ion-search and cordova sqlite storage.

Let’s get started,

For this we need to install cordova-sqlite-storage plugin in our ionic app.

Install Storage plugin

ionic cordova plugin add cordova-sqlite-storage

npm install --save @ionic/storage

Import storage to app module

Ok, now add storage to app-module.ts

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

For good practice, I always keep maintain things with services. So, I’ll add store.service.ts service to this app. But you can use storage direct importing to the page.

I am importing the Storage to the store service and then use this service where ever I need storage.

Create Service for storage

ionic g service store

store.service.ts

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class StoreService {

  constructor(
    private storage: Storage
  ) { }

  set(key: string, value: any) {
    this.storage.set(key, value);
  }

  remove(key: string) {
    this.storage.remove(key);
  }

  get(key: string) {
    return this.storage.get(key);
  }

}

Generate the search page to use ionic search bar

Then generate an ionic page with following command.

ionic g page common-search

Design search page with ion-search

Add HTML to common-search.page.html

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()" layout="ion-only">
        <ion-icon name="chevron-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-searchbar mode="ios" [(ngModel)]="searchTerm" style="padding: 16px 0px;"></ion-searchbar>

    <ion-buttons slot="end">
      <ion-button (click)="submit()" class="ion-text-capitalize">
        Go
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div class="list-divider">
    <span> Recent Searches </span> <span style="color: #0505b3" (click)="clearSearches()"> Clear </span>  
  </div>

  <ion-list mode="ios">
    <ion-item class="normal-font" *ngFor="let item of recentSearches" (click)="submit(item)">
      <ion-label>{{ item }}</ion-label>
      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
    </ion-item>
  </ion-list>

</ion-content>

Add CSS to common-search.page.scss

.list-divider {
	display: flex;
	justify-content: space-between;
	padding: 5px 10px;
	background: #ebeaea;
	margin-top: 20px;
}

.normal-font {
    font-size: 1rem;
}

Write some typescript

Open the common-search.page.ts

Add a variable recentSearches as an array and storageKey to save and retrieve data from storage.

Get the recent searches from the storage and assign to recentSearches array.

export class CommonSearchPage implements OnInit {
  searchTerm: string;
  storageKey: string = "recent_searches";
  recentSearches : any = [];

  constructor(
    private modalCtrl: ModalController,
    public store: StoreService
  ) { 
    this.store.get(this.storageKey).then((result) => {
      console.log('result :>> ', result);
      if ( result ) {
        this.recentSearches = result;
      }
    }).catch((err) => {
      console.log('err :>> ', err);
    });
  }

ngOnInit() {
 }

dismiss() {
    this.modalCtrl.dismiss();
  }

}

Create the method to submit the search and store to the storage.

submit(term?: string) {
    
    if ( term ) {
      this.searchTerm = term;
    }

    console.log('searchTerm :>> ', this.searchTerm);

    if ( this.searchTerm && this.searchTerm.trim() ) {

      if ( !this.recentSearches.includes(this.searchTerm) ) {
        this.recentSearches.push(this.searchTerm);
        this.store.set(this.storageKey,  this.recentSearches)
      }

      // data filtering will go here
    }

    this.searchTerm = null; 
  }

Create the method to clear the recent searches from the storage.

clearSearches() {
    this.recentSearches = [];
    this.store.remove(this.storageKey);
 }

Final output will be something like this,

That’s it, we have covered the ion-search bar with example. If you have any doubt please comment below.

Also Read: Scroll to top button with ionic 5

We can filter the data based on this search. Please comment below if you want an article on data filtering with searches.

Update : We have added a tutorial on product searching with ionic 5.