Ionic 3 – Autocomplete polje za unos

Share Button

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

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

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

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.

Kako to izgleda možemo vidjeti u home.html

I uz malo CSS-a

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

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

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).

Ionic Autocomplete - REST Countries API response - names

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

A konačan rezultat možete vidjeti u nastavku

Ionic Autocomplete demo 2