Ionic 3 - Autocomplete polje za unos

Ionic 3 – Autocomplete polje za unos

Iako Ionic raspolaže s dosta različitih i korisnih komponenti još uvijek među njima nećete pronaći autocomplete komponentu i prisiljeni ste koristiti neko vanjsko rješenje. U velikom broju slučajeva to je nekakav Angular NPM modul, kao što će biti slučaj i u ovom blog postu.

Što je autocomplete (samodovršavanje)?

To je funkcionalnost koja olakšava pregled, odabir i unos vrijednosti prilikom ispunjavanja nekakve forme. Recimo da imate formu u kojoj jedno od polja prikazuje popis djelatnika, a vi morate odabrati nekoliko njih. To se vrlo jednostavno može riješiti običnim padajućim izbornikom, Ionic za to koristi Select komponentu, i to je dobar izbor kada imate nekoliko djelatnika na tom popisu. Međutim, kada se nađete u situaciji da popis sadržava više stotina stavki odjednom padajući izbornik više nije toliko dobra opcija. Tu uskače autocomplete koji olakšava pronalazak i unos željene vrijednosti.

Google Autocomplete
Autocomplete s kojim ste se sigurno susreli

Postavljanje aplikacije

Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga

$ ionic start Ionic3AutocompleteTokenInput blank --v2
$ cd Ionic3AutocompleteTokenInput 

Sada ćemo instalirati angular2-tag-input NPM modul koji je osnova naše Ionic 3 autocomplete aplikacije.

npm install angular2-tag-input --save

Nakon toga potrebno je dodati referencu na RlTagInputModule , a to se radi unutar app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule } from '@angular/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import {RlTagInputModule} from 'angular2-tag-input';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    RlTagInputModule,
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

I to je to. Spremni smo za korištenje autocomplete funkcionalnosti.

Autocomplete implementacija

Postoje dva načina na koja možemo koristiti autocomplete. Prvi je da ponudimo niz (array) sa zadanim vrijednostima, a drugi je da omogućimo unos bilo koje vrijednosti. U ovom primjeru ponudit ćemo zadani niz.

Logika funkcionalnosti nalazit će se unutar home.ts datoteke. Ovdje imamo dva niza, autocompleteTags koji će se puniti vrijednostima koje odaberemo i autocompleteItems koji sadržava vrijednosti koje će biti ponuđene unutar autocomplete polja.

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

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

  public autocompleteTags = [];
  public autocompleteItems = [
    'Tomislav Stanković',
    'Marko Marulić',
    'Milan Cimeša',
    'Faust Vrančić',
    'Željko Hegedušić',
    'Đuro Pulitika',
    'Ivan Generalić',
    'Tomislav Šenoa'
  ];

  constructor(public navCtrl: NavController) {}

}

Kako to izgleda možemo vidjeti u home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 (angular2-tag-input)
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <ion-item no-padding>
</ion-item>
  <rl-tag-input
    [addOnBlur]="false"
    [autocomplete]="true"
    [autocompleteItems]="autocompleteItems"
    [(ngModel)]="autocompleteTags"
    placeholder="Unesi vrijednost">
  </rl-tag-input>
<br><hr>
<ion-list>
  <ion-item text-wrap>
    <h2>Popis:</h2>
    {{autocompleteTags | json}}
  </ion-item>
</ion-list> 
 
</ion-content>

I uz malo CSS-a

page-home {

   [_nghost-c1] {
        background-color: color($colors, primary);
        border-radius: 40px;
        font-size: 14px;
        color: #fff;
        margin-top: 1px;
    }
    [_nghost-c1] .ng2-tag-input-remove[_ngcontent-c1] {
        color: color($colors, primary);
        background: #fff;
        height: 20px;
        width: 20px;
        line-height: 20px;
    }

}

U konačnici to izgleda ovako

Ionic Autocomplete Demo 1

Dinamičke vrijednosti autocomplete niza?

U gornjem primjeru koristili smo niz od nekoliko ručno dodanih vrijednosti, ali to ne znači da ne možemo koristiti i dinamički niz koji dobijemo od API-ja.

U tom je slučaju potrebno kreirati ApiProvider naredbom

$ ionic generate provider ApiProvider

Koristit ćemo popis država s REST Countries API-ja https://restcountries.eu/

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ApiProvider {

  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }

  loadData(){
    return this._http.get('https://restcountries.eu/rest/v2/all')
      .map(res => res.json());
  }

}

Kada pozovemo API dobit ćemo console.log(res); koji nam daje niz (array) objekata. Međutim to je previše informacija, a nama trebaju samo imena država kako bi prema njima mogli raditi autocomplete.

Ionic Autocomplete - REST Countries API response

Zato ćemo napraviti petlju koja će nam izdvojiti samo nazive država i s njima napuniti naš autocompleteItems niz (array).

for (let i = 0; i < res.length; i++) {  

        this.autocompleteItems.push(
            res[i].name
        );

      };

Ionic Autocomplete - REST Countries API response - names

home.ts će u tom slučaju izgledati nešto malo drugačije

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiProvider } from '../../providers/api-provider';

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

  public autocompleteTags = [];
  public autocompleteItems = [];

  constructor(public navCtrl: NavController,
              public _apiProvider: ApiProvider) {

   //Pozivanje funkcije
   this.getCountries();

  }

   getCountries(){
     this._apiProvider.loadData().subscribe(res => {
     console.log(res);

     for (let i = 0; i < res.length; i++) {  

        this.autocompleteItems.push(
            res[i].name
        );

      };

        console.log(this.autocompleteItems);
    
    });
  } 

}

A konačan rezultat možete vidjeti u nastavku

Ionic Autocomplete demo 2

Objavio

Tomislav Stanković

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

4 misli o “Ionic 3 – Autocomplete polje za unos”

  1. Hi,

    Thank you for sharing your post.

    I have followed the steps you provided but seems it doesn’t work inside a Form Group. The autocomplete field is not showed.

    Regards

    Raul

    1. Hi Raul, thanks for your comment.

      To be honest I did not even try this inside a Form Group.

      Can you put some code on GitHub so I can see/test it?

      P.S. What I realized later, this module looks nice but has a lot of limitations.

  2. I need to autocomplete from an array of strings but I can not find how to do it, I need to do it as you do but without tags. Thank you very much for the help you can give me.

    ionic does not have a component for that, and I know the md-autocomplete but I do not know how to use it in ionic 3, could you help me?

Odgovori

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