Ionic 3: Select, search & autocomplete

Ionic 3 – select, search i autocomplete komponenta

Iako sam već objavio blog post na temu Ionic 3 autocomplete funkcionalnosti mislim da će vam se primjer iz ovog blog posta još više svidjeti. Cijela se funkcionalnost temelji na proširivanju mogućnosti već postojeće Ionic Select komponente.

Postavljanje aplikacije

Za početak je potrebno kreirati novi Ionic projekt

Izrada select komponente

Komponentu možete kreirati sljedećom naredbom:

Struktura datoteka sada izgleda ovako:

Sadržaj datoteka možete vidjeti u nastavku.

select-search-module.ts

Ovdje definiramo modul koji će Ionic aplikaciji reći od čega se sastoji naša Ionic komponenta te kako ju aplikacija prilikom pokretanja treba interpretirati.

select-search-page.html

select-search-page.scss

select-search-page.ts

select-search.html

select-search.scss

select-search.ts

Što se komponente tiče gore navedene datoteke su sve što vam treba. Za nešto više posjetite https://github.com/eakoriakin

Kreiranje klase

Nakon što smo kreirali komponentu možemo kreirati i klasu koja će se nalaziti u posebnoj datoteci. Takva vrsta odvajanja olakšava kasnije održavanje aplikacija.

country.ts

types.ts

Struktura datoteka sada izgleda ovako

Korištenje funkcionalnosti

Imamo komponentu, imamo klasu i sada napokon možemo nešto od svega toga konkretno i napraviti. Ako vam sve napravljeno do sada nije bilo poznato možete odahnuti jer se sada fokusiramo na home.ts i home.html datoteke jer ondje ćemo koristiti ranije kreiranu komponentu.

home.ts

home.html

Na kraju to izgleda ovako

Ionic 3 - select, search i autocomplete komponenta

Prikaz podataka direktno s API-ja

Ovdje ću koristiti https://restcountries.eu/rest/v2/all API. Ovaj sam API koristio u jednom od prethodnih blog postova.

Prvo je potrebno kreirati ApiProvider naredbom:

Sadržaj izgleda ovako:

I sada se opet vraćamo datotekama home.html i home.ts koje ću za potrebe ovog primjera pojednostaviti.

Funkcionalnost se sastoji od tri glavna dijela. Prvi dohvaća sve podatke s API-ja, drugi puni novi niz samo sa podacima koje želimo koristiti u aplikaciji i treći se tiče odabira vrijednosti u komponenti na klijentskoj strani.

Funkcija this.getCountries(); dohvaća popis svih država s API-ja. Unutar te funkcije vrtimo petlju kojom odabiremo koje parametre trebamo od API-ja jer ne trebaju nam svi parametri. Znači uzimao samo id, population i name.

Tako napunjen niz (array) proslijedimo ranije kreiranoj komponenti this.countries = this.passingFunction(myCountries);.

I na kraju kada odaberemo željene vrijednosti opet vrtimo petlju izdvajajući samo id.

Na kraju to izgleda ovako:

Ionic 3 – select, search i autocomplete komponenta

Zaključak

I to je sve. Ova se tema može obraditi na više načina, ali vjerujem da je i ovo dovoljno da dobijete uvid u jedan od načina kako riješiti pitanje Ionic autocomplete funkcionalnosti.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

4 misli o “Ionic 3 – select, search i autocomplete komponenta”

  1. Hi. I loved your tutorial and have implemented this in my app. However, I need the functionality to add an option to the list(array) if nothing is found in the search. Could you put up a tutorial on how to do that.

    I am fairly new to Ionic and angular.

  2. Hola , espero que te encuentres bien!!!!

    Mira cuando realizo todos los pasos que indicas, aparece el siguiente error, ¿ me puedes ayudar ?

    Template parse errors: Can’t bind to ‘items’ since it isn’t a known property of ‘select-search’.

    1. If ‘select-search’ is an Angular component and it has ‘items’ input, then verify that it is part of this module.
    2. If ‘select-search’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
    3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *