Ionic 3 - Searchbar Autocomplete

Ionic 3 – Searchbar komponenta

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

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

Ionic 3 – Searchbar komponenta

<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'}];
  }
}

Searchbar komponenta

Sada ću dodati Searchbar komponentu.

Aplikacija sada izgleda ovako

Ionic 3 – Searchbar komponenta

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>

Osim toga, dodao sam još i funkciju getItems() koja je zadužena za filtriranje.

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'}];
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.nizPodaci = this.nizPodaci.filter((stavka) => {
        return ((stavka.ime + stavka.prezime + stavka.tvrtka).toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

}

Jedina razlika između moje funkcije i ove iz službene dokumentacije

getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

je što sam ja omogućio filtriranje pomoću tri parametra (ime, prezime i tvrtka).

Zaključak

I to je sve! Iz ovog se primjera može vidjeti koliko je jednostavno napraviti filtriranje sadržaja koristeći search polje unutar Ionica.

{
  "name": "IonicSearchbar",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/core": "4.6.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "~2.6.2"
  },
  "description": "Ionic 3 - Searchbar komponenta"
}

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *