Ionic 3 - Searchbar komponenta - Tomislav Stanković

Za razliku od blog postova Ionic 3 – Autocomplete polje za unos i Ionic 3 – select, search i autocomplete komponenta u kojima sam obradio temu autocomplete polja za unos u ovom ću blog postu obraditi primjer polja za filtriranje sadržaja.

Ova je funkcionalnost podržana od strane Ionic i nije potrebno instalirati dodatne Ionic Native pluginove.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju

$ ionic start IonicSearchbar blank
$ cd IonicSearchbar

1 2	$ ionic start IonicSearchbar blank $ cd IonicSearchbar

Aplikacija će se sastojati od jednog ekrana sa prikazom trenutnih članova OSC-a na poveznici http://softwarecity.hr/clanovi/.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Searchbar
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let stavka of nizPodaci">
      <h2>{{stavka.ime}} {{stavka.prezime}}</h2>
      <p>{{stavka.tvrtka}}</p>
    </ion-item>
  </ion-list> 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Searchbar

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let stavka of nizPodaci">

<h2>{{stavka.ime}} {{stavka.prezime}}</h2>

<p>{{stavka.tvrtka}}</p>

</ion-item>

</ion-list>

</ion-content>

Kreiran je niz nizPodaci koji sadržava popis članova OSC-a.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  nizPodaci = [];

  constructor(public _navCtrl: NavController) {
 
    this.initializeItems();

  }

  initializeItems(){
    this.nizPodaci = [{'ime': 'Nenad', 'prezime': 'Andraković', 'tvrtka': 'Inchoo'},
    {'ime': 'Toni', 'prezime': 'Aničić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zrinka', 'prezime': 'Antolović', 'tvrtka': 'Inchoo'},
    {'ime': 'Davor', 'prezime': 'Banović', 'tvrtka': 'Oradian'},
    {'ime': 'Maja', 'prezime': 'Berger', 'tvrtka': 'Certus'},
    {'ime': 'Tomislav', 'prezime': 'Bilić', 'tvrtka': 'Inchoo'},
    {'ime': 'Kristina', 'prezime': 'Bite', 'tvrtka': ''},
    {'ime': 'Goran', 'prezime': 'Bokun', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Bosnić', 'tvrtka': 'LegalTie'},
    {'ime': 'Marko', 'prezime': 'Briševac', 'tvrtka': 'Inchoo'},
    {'ime': 'Igor', 'prezime': 'Buzatović', 'tvrtka': 'Inovativni trendovi d.o.o.'},
    {'ime': 'Katarina', 'prezime': 'Dijaković', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Galamboš', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Grgić', 'tvrtka': 'Agencija Adventa'},
    {'ime': 'Hrvoje', 'prezime': 'Horvat', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Bela', 'prezime': 'Ikotić', 'tvrtka': 'BIOS/OSC'},
    {'ime': 'Tomislav', 'prezime': 'Jakopec', 'tvrtka': 'Filozofski fakultet u Osijeku'},
    {'ime': 'Antun', 'prezime': 'Jalovičar', 'tvrtka': 'MUP'},
    {'ime': 'Goran', 'prezime': 'Jarić', 'tvrtka': 'Odvjetnički ured'},
    {'ime': 'Marko', 'prezime': 'Jovanovac', 'tvrtka': 'Marivo'},
    {'ime': 'Hrvoje', 'prezime': 'Jurišić', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Jurlina', 'tvrtka': 'Osijek Software City ⁄ COBE'},
    {'ime': 'Ružica', 'prezime': 'Kadić', 'tvrtka': 'Plava tvornica'},
    {'ime': 'Hrvoje', 'prezime': 'Kalić', 'tvrtka': ''},
    {'ime': 'Dražen', 'prezime': 'Karačić', 'tvrtka': 'Inchoo'},
    {'ime': 'Maja', 'prezime': 'Kardum', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Krpan', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Antun', 'prezime': 'Lauc', 'tvrtka': ''},
    {'ime': 'Ana', 'prezime': 'Leh', 'tvrtka': ''},
    {'ime': 'Nandino', 'prezime': 'Lončar', 'tvrtka': 'Inchoo'},
    {'ime': 'Mislav', 'prezime': 'Majdandžić', 'tvrtka': 'Eksperimental Games'},
    {'ime': 'Stefani', 'prezime': 'Majić', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Krešimir', 'prezime': 'Marić', 'tvrtka': 'Keeper Solutions'},
    {'ime': 'Ivan', 'prezime': 'Marković', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Tina', 'prezime': 'Mazalin', 'tvrtka': 'Odvjetnički ured Tanja Petković Gregurek'},
    {'ime': 'Ivan', 'prezime': 'Mihalj', 'tvrtka': 'RISE GmbH'},
    {'ime': 'Tajana', 'prezime': 'Milanović', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Ivan', 'prezime': 'Milanović', 'tvrtka': 'Okami, obrt za računalne usluge'},
    {'ime': 'Kruno', 'prezime': 'Miličević', 'tvrtka': ''},
    {'ime': 'Vanda', 'prezime': 'Muhar', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Damjan', 'prezime': 'Orešković', 'tvrtka': 'Shoutem'},
    {'ime': 'Akoš', 'prezime': 'Papp', 'tvrtka': ''},
    {'ime': 'Vojislav', 'prezime': 'Pavaosvić', 'tvrtka': 'BetaWare'},
    {'ime': 'Luka', 'prezime': 'Pavličić', 'tvrtka': ''},
    {'ime': 'Tomislav', 'prezime': 'Perić', 'tvrtka': 'Olimpias Tekstil d.o.o.'},
    {'ime': 'Igor', 'prezime': 'Plac', 'tvrtka': 'Prototyp'},
    {'ime': 'Tomislav', 'prezime': 'Plavčić', 'tvrtka': 'Percona'},
    {'ime': 'Toni', 'prezime': 'Podmanički', 'tvrtka': ''},
    {'ime': 'Igor', 'prezime': 'Ragić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Ana', 'prezime': 'Rogina', 'tvrtka': 'Digitalna agencija Gerila'},
    {'ime': 'Marijana', 'prezime': 'Schonberger', 'tvrtka': ''},
    {'ime': 'Aron', 'prezime': 'Stanić', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Stanković', 'tvrtka': 'Informatika Fortuno'},
    {'ime': 'Stanislav', 'prezime': 'Strešnjak', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Filip', 'prezime': 'Svetličić', 'tvrtka': 'Inchoo'},
    {'ime': 'Antonija', 'prezime': 'Tadić', 'tvrtka': 'Inchoo'},
    {'ime': 'Mihael', 'prezime': 'Tomić', 'tvrtka': 'Mono d.o.o.'},
    {'ime': 'Miroslav', 'prezime': 'Varga', 'tvrtka': 'Escape d.o.o.'},
    {'ime': 'Ivan', 'prezime': 'Varga', 'tvrtka': 'Adcon'},
    {'ime': 'Pavle', 'prezime': 'Vidaković', 'tvrtka': 'Agronova'},
    {'ime': 'Blaž', 'prezime': 'Vincetić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Dunja', 'prezime': 'Vorkapić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zvonimir', 'prezime': 'Vuković', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Weiler', 'tvrtka': 'Inchoo'},
    {'ime': 'Marijana', 'prezime': 'Zekić-Sušac', 'tvrtka': 'EFOS'},
    {'ime': 'Bojan', 'prezime': 'Zidarević', 'tvrtka': ''},
    {'ime': 'Andreja', 'prezime': 'Čičak', 'tvrtka': 'Inchoo'}];
  }
}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

nizPodaci = [];

constructor(public _navCtrl: NavController) {

this.initializeItems();

}

initializeItems(){

this.nizPodaci = [{'ime': 'Nenad', 'prezime': 'Andraković', 'tvrtka': 'Inchoo'},

{'ime': 'Toni', 'prezime': 'Aničić', 'tvrtka': 'Inchoo'},

{'ime': 'Zrinka', 'prezime': 'Antolović', 'tvrtka': 'Inchoo'},

{'ime': 'Davor', 'prezime': 'Banović', 'tvrtka': 'Oradian'},

{'ime': 'Maja', 'prezime': 'Berger', 'tvrtka': 'Certus'},

{'ime': 'Tomislav', 'prezime': 'Bilić', 'tvrtka': 'Inchoo'},

{'ime': 'Kristina', 'prezime': 'Bite', 'tvrtka': ''},

{'ime': 'Goran', 'prezime': 'Bokun', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Bosnić', 'tvrtka': 'LegalTie'},

{'ime': 'Marko', 'prezime': 'Briševac', 'tvrtka': 'Inchoo'},

{'ime': 'Igor', 'prezime': 'Buzatović', 'tvrtka': 'Inovativni trendovi d.o.o.'},

{'ime': 'Katarina', 'prezime': 'Dijaković', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Galamboš', 'tvrtka': ''},

{'ime': 'Ivan', 'prezime': 'Grgić', 'tvrtka': 'Agencija Adventa'},

{'ime': 'Hrvoje', 'prezime': 'Horvat', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},

{'ime': 'Bela', 'prezime': 'Ikotić', 'tvrtka': 'BIOS/OSC'},

{'ime': 'Tomislav', 'prezime': 'Jakopec', 'tvrtka': 'Filozofski fakultet u Osijeku'},

{'ime': 'Antun', 'prezime': 'Jalovičar', 'tvrtka': 'MUP'},

{'ime': 'Goran', 'prezime': 'Jarić', 'tvrtka': 'Odvjetnički ured'},

{'ime': 'Marko', 'prezime': 'Jovanovac', 'tvrtka': 'Marivo'},

{'ime': 'Hrvoje', 'prezime': 'Jurišić', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Jurlina', 'tvrtka': 'Osijek Software City ⁄ COBE'},

{'ime': 'Ružica', 'prezime': 'Kadić', 'tvrtka': 'Plava tvornica'},

{'ime': 'Hrvoje', 'prezime': 'Kalić', 'tvrtka': ''},

{'ime': 'Dražen', 'prezime': 'Karačić', 'tvrtka': 'Inchoo'},

{'ime': 'Maja', 'prezime': 'Kardum', 'tvrtka': 'Inchoo'},

{'ime': 'Tomislav', 'prezime': 'Krpan', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Antun', 'prezime': 'Lauc', 'tvrtka': ''},

{'ime': 'Ana', 'prezime': 'Leh', 'tvrtka': ''},

{'ime': 'Nandino', 'prezime': 'Lončar', 'tvrtka': 'Inchoo'},

{'ime': 'Mislav', 'prezime': 'Majdandžić', 'tvrtka': 'Eksperimental Games'},

{'ime': 'Stefani', 'prezime': 'Majić', 'tvrtka': 'SPAN d.o.o.'},

{'ime': 'Krešimir', 'prezime': 'Marić', 'tvrtka': 'Keeper Solutions'},

{'ime': 'Ivan', 'prezime': 'Marković', 'tvrtka': 'SPAN d.o.o.'},

{'ime': 'Tina', 'prezime': 'Mazalin', 'tvrtka': 'Odvjetnički ured Tanja Petković Gregurek'},

{'ime': 'Ivan', 'prezime': 'Mihalj', 'tvrtka': 'RISE GmbH'},

{'ime': 'Tajana', 'prezime': 'Milanović', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Ivan', 'prezime': 'Milanović', 'tvrtka': 'Okami, obrt za računalne usluge'},

{'ime': 'Kruno', 'prezime': 'Miličević', 'tvrtka': ''},

{'ime': 'Vanda', 'prezime': 'Muhar', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Damjan', 'prezime': 'Orešković', 'tvrtka': 'Shoutem'},

{'ime': 'Akoš', 'prezime': 'Papp', 'tvrtka': ''},

{'ime': 'Vojislav', 'prezime': 'Pavaosvić', 'tvrtka': 'BetaWare'},

{'ime': 'Luka', 'prezime': 'Pavličić', 'tvrtka': ''},

{'ime': 'Tomislav', 'prezime': 'Perić', 'tvrtka': 'Olimpias Tekstil d.o.o.'},

{'ime': 'Igor', 'prezime': 'Plac', 'tvrtka': 'Prototyp'},

{'ime': 'Tomislav', 'prezime': 'Plavčić', 'tvrtka': 'Percona'},

{'ime': 'Toni', 'prezime': 'Podmanički', 'tvrtka': ''},

{'ime': 'Igor', 'prezime': 'Ragić', 'tvrtka': 'Siemens CVC d.o.o.'},

{'ime': 'Ana', 'prezime': 'Rogina', 'tvrtka': 'Digitalna agencija Gerila'},

{'ime': 'Marijana', 'prezime': 'Schonberger', 'tvrtka': ''},

{'ime': 'Aron', 'prezime': 'Stanić', 'tvrtka': 'Inchoo'},

{'ime': 'Tomislav', 'prezime': 'Stanković', 'tvrtka': 'Informatika Fortuno'},

{'ime': 'Stanislav', 'prezime': 'Strešnjak', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},

{'ime': 'Filip', 'prezime': 'Svetličić', 'tvrtka': 'Inchoo'},

{'ime': 'Antonija', 'prezime': 'Tadić', 'tvrtka': 'Inchoo'},

{'ime': 'Mihael', 'prezime': 'Tomić', 'tvrtka': 'Mono d.o.o.'},

{'ime': 'Miroslav', 'prezime': 'Varga', 'tvrtka': 'Escape d.o.o.'},

{'ime': 'Ivan', 'prezime': 'Varga', 'tvrtka': 'Adcon'},

{'ime': 'Pavle', 'prezime': 'Vidaković', 'tvrtka': 'Agronova'},

{'ime': 'Blaž', 'prezime': 'Vincetić', 'tvrtka': 'Siemens CVC d.o.o.'},

{'ime': 'Dunja', 'prezime': 'Vorkapić', 'tvrtka': 'Inchoo'},

{'ime': 'Zvonimir', 'prezime': 'Vuković', 'tvrtka': ''},

{'ime': 'Ivan', 'prezime': 'Weiler', 'tvrtka': 'Inchoo'},

{'ime': 'Marijana', 'prezime': 'Zekić-Sušac', 'tvrtka': 'EFOS'},

{'ime': 'Bojan', 'prezime': 'Zidarević', 'tvrtka': ''},

{'ime': 'Andreja', 'prezime': 'Čičak', 'tvrtka': 'Inchoo'}];

}

Searchbar komponenta

Sada ću dodati Searchbar komponentu.

Aplikacija sada izgleda ovako

U pregled sam dodao </ion-searchbar>

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Searchbar
    </ion-title>
  </ion-navbar>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let stavka of nizPodaci">
      <h2>{{stavka.ime}} {{stavka.prezime}}</h2>
      <p>{{stavka.tvrtka}}</p>
    </ion-item>
  </ion-list> 
</ion-content>