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
|
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/.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
{ "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" } |