Functionable ionic-search-bar

I want to make my ionic-search-bar functionable, and when I write for example "a" it shows me all the cruises that start with that letter, here is my code

pagina-principal.page.html:

```
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Pagina Principal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1 class="titulo">Descubre los mejores barcos</h1>
<ion-searchbar show-clear-button="focus" [debounce]="1000" (ionInput)="handleInput($event)">
</ion-searchbar>
<ion-card [routerLink]="['/adventure-of-the-seas']">
<ion-card-header>
<ion-card-title>Adventure of the Seas</ion-card-title>
<ion-card-subtitle>Una manera más audaz de realizar una escapada</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/allure-of-the-seas']">
<ion-card-header>
<ion-card-title>Allure of the Seas</ion-card-title>
<ion-card-subtitle>Espectáculos y éxitos</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/anthem-of-the-seas']">
<ion-card-header>
<ion-card-title>Anthem of the Seas</ion-card-title>
<ion-card-subtitle>Eleva el nivel más allá</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/brilliance-of-the-seas']">
<ion-card-header>
<ion-card-title>Brilliance of the Seas</ion-card-title>
<ion-card-subtitle>Enciende tu espíritu viajero</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/enchantment-of-the-seas']">
<ion-card-header>
<ion-card-title>Enchantment of the Seas</ion-card-title>
<ion-card-subtitle>Mejora tu escapada</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/explorer-of-the-seas']">
<ion-card-header>
<ion-card-title>Explorer of the Seas</ion-card-title>
<ion-card-subtitle>Todo en la isla</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/freedom-of-the-seas']">
<ion-card-header>
<ion-card-title>Freedom of the Seas</ion-card-title>
<ion-card-subtitle>Aventura asombrosa</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/grandeur-of-the-seas']">
<ion-card-header>
<ion-card-title>Grandeur of the Seas</ion-card-title>
<ion-card-subtitle>Una escapada diferente</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/harmony-of-the-seas']">
<ion-card-header>
<ion-card-title>Harmony of the Seas</ion-card-title>
<ion-card-subtitle>Apúnta a la aventura de navegar en familia</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/icon-of-the-seas']">
<ion-card-header>
<ion-card-title>Icon of the Seas</ion-card-title>
<ion-card-subtitle>Conoce a the Icon of Vacations</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/independence-of-the-seas']">
<ion-card-header>
<ion-card-title>Independence of the Seas</ion-card-title>
<ion-card-subtitle>Una experiencia audaz</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/jewel-of-the-seas']">
<ion-card-header>
<ion-card-title>Jewel of the Seas</ion-card-title>
<ion-card-subtitle>Profundiza en nuevos descubrimientos</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/liberty-of-the-seas']">
<ion-card-header>
<ion-card-title>Liberty of the Seas</ion-card-title>
<ion-card-subtitle>Rompe el hielo</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/mariner-of-the-seas']">
<ion-card-header>
<ion-card-title>Mariner of the Seas</ion-card-title>
<ion-card-subtitle>Aventuras audaces en el horizonte</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/navigator-of-the-seas']">
<ion-card-header>
<ion-card-title>Navigator of the Seas</ion-card-title>
<ion-card-subtitle>Aventuras en la costa oeste</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/oasis-of-the-seas']">
<ion-card-header>
<ion-card-title>Oasis of the Seas</ion-card-title>
<ion-card-subtitle>Más grande. Más impresionante. Innovador</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/odyssey-of-the-seas']">
<ion-card-header>
<ion-card-title>Odyssey of the Seas</ion-card-title>
<ion-card-subtitle>Recorre el mundo con audacia</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/ovation-of-the-seas']">
<ion-card-header>
<ion-card-title>Ovation of the Seas</ion-card-title>
<ion-card-subtitle>Más grande. Más impresionante. Rumbo a baja</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/quantum-of-the-seas']">
<ion-card-header>
<ion-card-title>Quantum of the Seas</ion-card-title>
<ion-card-subtitle>Una nueva frontera favorita</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/radiance-of-the-seas']">
<ion-card-header>
<ion-card-title>Radiance of the Seas</ion-card-title>
<ion-card-subtitle>Paseo por la naturaleza</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/rhapsody-of-the-seas']">
<ion-card-header>
<ion-card-title>Rhapsody of the Seas</ion-card-title>
<ion-card-subtitle>Tu boleto a aventuras exóticas</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/serenade-of-the-seas']">
<ion-card-header>
<ion-card-title>Serenade of the Seas</ion-card-title>
<ion-card-subtitle>Aventuras de costa a costa</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/spectrum-of-the-seas']">
<ion-card-header>
<ion-card-title>Spectrum of the Seas</ion-card-title>
<ion-card-subtitle>El primer crucero de la clase quantum ultra</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/star-of-the-seas']">
<ion-card-header>
<ion-card-title>Star of the Seas</ion-card-title>
<ion-card-subtitle>The next Icon</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/symphony-of-the-seas']">
<ion-card-header>
<ion-card-title>Symphony of the Seas</ion-card-title>
<ion-card-subtitle>Aventura revolucionaria</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/utopia-of-the-seas']">
<ion-card-header>
<ion-card-title>Utopia of the Seas</ion-card-title>
<ion-card-subtitle>The World's Biggest Weekend</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/vision-of-the-seas']">
<ion-card-header>
<ion-card-title>Vision of the Seas</ion-card-title>
<ion-card-subtitle>Lánzate a la aventura para ver el mundo con otros ojos</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/voyager-of-the-seas']">
<ion-card-header>
<ion-card-title>Voyager of the Seas</ion-card-title>
<ion-card-subtitle>Esto es una aventura intensa</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card [routerLink]="['/wonder-of-the-seas']">
<ion-card-header>
<ion-card-title>Wonder of the Seas</ion-card-title>
<ion-card-subtitle>Las mejores vacaciones familiares en Orlando</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-content>
</div>
```


pagina-principal.page.ts:

```
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Router, RouterLink } from '@angular/router';
import { AuthenticationService } from '../authentication.service';
import { MenuController } from '@ionic/angular';

@Component({
selector: 'app-pagina-principal',
templateUrl: './pagina-principal.page.html',
styleUrls: ['./pagina-principal.page.scss'],
standalone: true,
imports: [CommonModule, FormsModule, RouterLink, IonicModule ]
})
export class PaginaPrincipalPage {
searchTerm: string='';
user: any
constructor(public authService:AuthenticationService, public router: Router,
public menu: MenuController) {
this.user = authService.getProfile()
this.menuActive();
}

menuActive(){
this.menu.enable(true, 'menu');
}

handleInput(event: any){
this.searchTerm = event.target.value;
this.getSearchData();
}

getSearchData(){
console.log('Searching for:', this.searchTerm);
}

async logout(){
this.authService.signOut().then(() => {
this.router.navigate(['/login'])
})
}
}
```


I want that when i write in the searchbar it shows me the cruise im looking for, do I need to add al the cruises in to an array? or can I do it the way I have it? Thanks for the help

Continue reading...