BiQ Locate Autocomplete - single field

BiQ Locate Autocomplete - single field er en javascript komponent, som gør let at implementere en adresseindtastning med autocomplete i et enkelt felt. Du kan teste komponenten ved at indtaste en adresse i feltet herunder.

Valgt adresse:

Guide til implementering

Denne guide viser trin-for-trin, hvordan du implementere BiQ Locate Autocomplete (single field) i din webapplikation. For at bruge BiQ Locate Autocomplete skal du have en Bearer Token. Kontakt BiQ for at få udstedt en Bearer Token.

Step 1 - Tilføj inputfeltet

Tilføj et felt til adresseindtastning.

<div class="autocomplete-container">
    <label for="adresse-input">Adresse:</label>
    <input type="search" id="adresse-input">
</div>

Step 2 - Indlæs BiQ Locate JavaScript-biblioteket

Biblioteket biq-autocomplete.min.js skal være indlæst, før side-scriptet kører. Så indsæt nedenstående linie hvor dit website initialiseres. Alternativt i toppen på den side hvor du skal bruge autocomplete komponenten.

<script src="biq-autocomplete.min.js"></script>

Step 3 - Sørg for at styling er inkluderet

Autocomplete-forslagene bruger et stylesheet. Inkluder biq_autocomplete.css ved at tilføje nedenstående linie hvor dit website initialiseres eller på den side hvor du skal bruge autocomplete komponenten.

<link rel="stylesheet" href="biq_autocomplete.css" />

Step 4 - Tilføj side-scriptet

Tilføj et side-script, som "starter" komponenten på inputfeltet. Indsæt din Bearer Token i stedet for teksten INSERT-YOUR-BEARER-TOKEN-HERE.

<script>
    const TOKEN_KEY = 'INSERT-YOUR-BEARER-TOKEN-HERE';

    biqAutocomplete.biqAutocomplete(document.getElementById('adresse-input'), {
        bearerToken: TOKEN_KEY,
        select: function (selected) {
            document.getElementById("adresse-selected").innerHTML = selected.tekst;
        }
    });
</script>

Step 5 - Vis den valgte adresse

Når brugeren vælger et forslag, vises resultatet her:

<p>Valgt adresse: <span id="adresse-selected"></span></p>

Resultat: Brugeren skriver en adresse, får forslag med det samme, vælger et forslag, og den valgte adresse vises under feltet.