ionicで検索機能を実装する方法

こんにちは、本日はionicでサーチバーを使う方法を調べてみたので紹介したいと思います。

今回参考にしたサイトはこちら

以下のコードをindex.htmlに記入すると検索機能を実装できる。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Searchbar</title>

  <style>
    :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
    }
  </style>
</head>
<body>
  <ion-app>
    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Searchbar</ion-title>
      </ion-toolbar>
      <ion-toolbar>
        <ion-searchbar></ion-searchbar>
      </ion-toolbar>
    </ion-header>
    <ion-content fullscreen>
      <ion-list>
        <ion-item>Amsterdam</ion-item>
        <ion-item>Bogota</ion-item>
        <ion-item>Buenos Aires</ion-item>
        <ion-item>Cairo</ion-item>
        <ion-item>Dhaka</ion-item>
        <ion-item>Edinburgh</ion-item>
        <ion-item>Geneva</ion-item>
        <ion-item>Genoa</ion-item>
        <ion-item>Glasglow</ion-item>
        <ion-item>Hanoi</ion-item>
        <ion-item>Hong Kong</ion-item>
        <ion-item>Islamabad</ion-item>
        <ion-item>Istanbul</ion-item>
        <ion-item>Jakarta</ion-item>
        <ion-item>Kiel</ion-item>
        <ion-item>Kyoto</ion-item>
        <ion-item>Le Havre</ion-item>
        <ion-item>Lebanon</ion-item>
        <ion-item>Lhasa</ion-item>
        <ion-item>Lima</ion-item>
        <ion-item>London</ion-item>
        <ion-item>Los Angeles</ion-item>
        <ion-item>Madrid</ion-item>
        <ion-item>Manila</ion-item>
        <ion-item>New York</ion-item>
        <ion-item>Olympia</ion-item>
        <ion-item>Oslo</ion-item>
        <ion-item>Panama City</ion-item>
        <ion-item>Peking</ion-item>
        <ion-item>Philadelphia</ion-item>
        <ion-item>San Francisco</ion-item>
        <ion-item>Seoul</ion-item>
        <ion-item>Taipeh</ion-item>
        <ion-item>Tel Aviv</ion-item>
        <ion-item>Tokio</ion-item>
        <ion-item>Uelzen</ion-item>
        <ion-item>Washington</ion-item>
      </ion-list>
    </ion-content>
  </ion-app>

  <script>
    const searchbar = document.querySelector('ion-searchbar');
    const items = Array.from(document.querySelector('ion-list').children);
    searchbar.addEventListener('ionInput', handleInput);
    function handleInput(event) {
      const query = event.target.value.toLowerCase();
      requestAnimationFrame(() => {
        items.forEach(item => {
          const shouldShow = item.textContent.toLowerCase().indexOf(query) > -1;
          item.style.display = shouldShow ? 'block' : 'none';
        });
      });
    }
  </script>
</body>
</html>