Guide til DAWA Autocomplete2

Trin for trin guiden viser, hvordan du implementerer autocomplete indtastning af adresser vha. DAWA Autocomplete2 i en web applikation.

Guiden

Guiden viser dig via et eksempel, hvordan du trin for trin etablerer adresseindtastning med autocomplete i din web applikation. Guiden er rettet mod DAWA Autocomplete2 komponenten. En guide til den tidligere version, DAWA Autocomplete, finder du her

.

Trin 1 - Start

Lav en folder, kaldet Guide, indeholdende to filen. En html fil kaldet index.html:

En css fil kaldet style.css indholdende:

Se index.html i en browser.

Trin 2 - Installer DAWA Autocomplete2 komponenten

DAWA Autocomplete2 installeres med npm. Hvis du ikke har npm installeret, kan du installere npm ved at installere node.js. Vælg den aktuelle Long Term Support (LTS) release.

DAWA Autocomplete installeres på følgende måde:

npm install dawa-autocomplete2

Der er nu i guide folderen oprettet en folder ved navn node_modules. Denne folder indeholder DAWA Autocomplete2 komponenten.

Trin 3 - Indsæt referencer til autocomplete komponenten

Nu skal vores web applikation tilpasses DAWA Autocomplete2 komponenten. Først indsættes en reference til komponentens javascript kode. Det gøres ved at indsætte nedenstående i index.html:

Nu indeholder index.html følgende:

DAWA Autocomplete er baseret på et nyere browser API, så ældre browsere som Internet Explore 11, skal håndteres med de så kaldte polyfills core.min.js og fetch.min.js.

I style.css indsættes i slutningen følgende DAWA autocomplete specifik css styles:

Trin 4 - Forbind input-feltet med komponenten

Input-feltet skal forbindes med adresse autocomplete funktionaliteten i komponenten. Det gøres ved at oprette script.js filen i guide folderen med følgende indhold:

Lad index.html referer til script.js og indsæt input-feltet i et div-element med klassen autocomplete-container:

Trin 5 - Prøv

Åbn index.html i en browser. Begynd at indtast en adresse i input-feltet, og du vil blive præsenteret for forslag, som du kan autocomplete.