BiQ Locate Autocomplete - multi field

BiQ Locate Autocomplete - multi field er en javascript komponent, som gør let at implementere en adresseindtastning med autocomplete via felterne postnummer/by, vejnavn, husnummer og etage/side. Du kan teste komponenten ved at indtaste en adresse i felterne herunder.

Valgt adresse:

Guide til implementering

Denne guide viser trin-for-trin, hvordan du implementere BiQ Locate Autocomplete (multi 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 felter (Postnr/By, Vejnavn, Husnr, Etage/Side)

Multi field-varianten deler adresseindtastningen op i flere felter, som hver har autocomplete. Brug samme id-navne som vist her, så JavaScript kan finde felterne.

<div class="autocomplete-container">
    <label for="postnr-input">Postnr/By:</label>
    <input type="search" id="postnr-input" />
</div>

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

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

<div class="autocomplete-container">
    <label for="etageside-input">Etage/Side:</label>
    <input type="search" id="etageside-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 komponenterne på de fire felter. Indsæt din Bearer Token i stedet for teksten INSERT-YOUR-BEARER-TOKEN-HERE.

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

    const postnrInput = document.getElementById('postnr-input');
    const vejnavnInput = document.getElementById('vejnavn-input');
    const husnrInput = document.getElementById('husnr-input');
    const etageDoerInput = document.getElementById('etageside-input');

    let selectedPostnr = null;
    let selectedVejnavn = null;
    let selectedAdgangsadresseid = null;

    const postnrInstance = biqAutocomplete.biqPostnrAutocomplete(postnrInput, {
        bearerToken: TOKEN_KEY,
        select: function (selected) {
            selectedPostnr = selected.data.nr;
            vejnavnInstance.setPostnr(selectedPostnr);
            husnrInstance.setPostnr(selectedPostnr);
            vejnavnInput.focus();
        }
    });

    const vejnavnInstance = biqAutocomplete.biqVejnavnAutocomplete(vejnavnInput, {
        bearerToken: TOKEN_KEY,
        postnr: selectedPostnr,
        select: function (selected) {
            selectedVejnavn = selected.data.navn;
            husnrInstance.setVejnavn(selectedVejnavn);
            husnrInput.focus();
            husnrInstance.triggerSearch();
        }
    });

    const husnrInstance = biqAutocomplete.biqHusnrAutocomplete(husnrInput, {
        bearerToken: TOKEN_KEY,
        postnr: selectedPostnr,
        vejnavn: selectedVejnavn,
        select: function (selected) {
            selectedAdgangsadresseid = selected.data.id;
            etageDoerInstance.setAdgangsadresseid(selectedAdgangsadresseid);
            etageDoerInput.focus();
            etageDoerInstance.triggerSearch();
        }
    });

    const etageDoerInstance = biqAutocomplete.biqEtageDørAutocomplete(etageDoerInput, {
        bearerToken: TOKEN_KEY,
        adgangsadresseid: selectedAdgangsadresseid,
        select: function (selected) {
            document.getElementById('adresse-selected').innerHTML = selected.data.betegnelse;
        }
    });
</script>
Step 5 - Vis den valgte adresse

Når brugeren vælger en komplet adresse, vises resultatet her:

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

Resultat: Brugeren udfylder felterne trinvis, får forslag undervejs, og den endelige adresse vises under felterne.