Ionicで検索機能を実装する

はじめに

ionicでの検索機能を実装したので紹介します。
ion-searchbarを使って実装します。
以下のような検索機能が実装できます。

プロジェクトを作成する

ionic start searchBar blank --type=angular

検索機能を実装する

/src/app/home/home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      検索
    </ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-searchbar 
      showCancelButton="focus"
      placeholder="入力してください"
      (ionInput)="getItems($event)">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item *ngFor="let item of itemList">
      <ion-label>
        {{item}}
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

/src/app/home/home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  itemList = [];
  constructor() {}

  ionViewWillEnter() {
    this.itemList = ['Amsterdam', 'Bogota', 'Buenos Aires', 'Cairo', 'Dhaka',
              'Edinburgh', 'Geneva', 'Genoa', 'Glasgow', 'Hanoi', 'Hong Kong',
              'Islamabad', 'Istanbul', 'Jakarta', 'Kiel', 'Kyoto', 'Le Havre',
              'Lebanon', 'Lhasa', 'Lima', 'London', 'Los Angeles', 'Madrid',
              'Manila', 'New York', 'Olympia', 'Oslo', 'Panama City', 'Peking',
              'Philadelphia', 'San Francisco', 'Seoul', 'Taipeh', 'Tel Aviv',
              'Tokio', 'Uelzen', 'Washington'];
  }

  async getItems(ev: any) {
    let value = ev.target.value;
    if (value === '') {
      this.itemList = ['Amsterdam', 'Bogota', 'Buenos Aires', 'Cairo', 'Dhaka',
      'Edinburgh', 'Geneva', 'Genoa', 'Glasgow', 'Hanoi', 'Hong Kong',
      'Islamabad', 'Istanbul', 'Jakarta', 'Kiel', 'Kyoto', 'Le Havre',
      'Lebanon', 'Lhasa', 'Lima', 'London', 'Los Angeles', 'Madrid',
      'Manila', 'New York', 'Olympia', 'Oslo', 'Panama City', 'Peking',
      'Philadelphia', 'San Francisco', 'Seoul', 'Taipeh', 'Tel Aviv',
      'Tokio', 'Uelzen', 'Washington'];
    }
    // if the value is an empty string don't filter the items
    if (value !== '') {
      this.itemList = this.itemList.filter((item) => {
        //前方一致
        if (value.match(/^[A-Za-z0-9]*$/)) {
          return (item.toString().toLowerCase().indexOf(value.toLowerCase()) === 0);
        } else {
          return (item.toString().toLowerCase().indexOf(value.toLowerCase()) === 0);
        }
        //部分一致
        /*
        if (value.match(/^[A-Za-z0-9]*$/)) {
          return (item.toLowerCase().indexOf(value));
        } else {
          return (item.toLowerCase().indexOf(value));
        }
        */
      });
    }
  }
}

おわりに

ion-searchbarのページでは部分一致検索が紹介されていましたが、今回は前方一致検索を実装してみました。