Guide

Forudsætninger

Du vil via et lille eksempel blive introduceret til, hvordan du anvender AWS 4's autocomplete komponent i en web applikation. Du finder autocomplete komponenten og dens dokumentation på GitHub. Guiden forudsætter, at du har kendskab til html, JavaScript og jQuery.

Trin 1 - Start

Lav en folder, kaldet Guide, indeholdende følgende html-fil:

<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>DAWA autocomplete guide</title>
</head>
<body>
<label for='adresse'>Autocomplete af adresse:</label>
<input type="text" id="adresse" style="width: 400px;">
<p>Valgt adresse: <span id="adresse-choice"/></p>
</body>
</html>

Åbn filen i en browser.

Trin 2 - Installer komponenten og dens afhængigheder

Du skal nu hente autocomplete komponenten fra GitHub samt de JavaScript biblioteker, som komponenten er afhængig af. Det drejer sig om jQuery og jQuery-ui. Det kan gøres manuelt, men vi foretrækker at bruge Bower. Hvis du ikke har bower, kan den hentes ved at følge denne vejledning.

Autocomple komponenten og dens afhængigheder hentes ved at kalde følgende (i folderen, som du netop har oprettet):

bower install dawa-autocomplete

Det resulterer i en folder ved navn bower_components i Guide folderen, som indeholder autocomplete komponenten og dens afhængigheder.

Trin 3 - Indsæt referencer til autocomplete komponenten og dens afhængigheder

Forudsætnungen for at vor lille web applikation kan anvende komponenten, er at html-filen refererer til den og dens afhængigheder. Det gøres ved at indsættes det markerede i html-filen.

<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>DAWA autocomplete guide</title>
</head>
<link rel="stylesheet" href="bower_components/jquery-ui/themes/start/jquery-ui.css">
<link rel="stylesheet" href="bower_components/jquery-ui/themes/start/theme.css">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/dawa-autocomplete/dawa-autocomplete.js"></script>

<body>
<label for='adresse'>Autocomplete af adresse:</label>
<input type="text" id="adresse" style="width: 400px;">
<p>Valgt adresse: <span id="adresse-choice"/></p>
</body>
</html>

Trin 4 - Forbind input-feltet med komponenten

Input-feltet i html-filen skal forbindes med autocomplete-komponenten for at etablere adresse autocomplete funktionalitet. Det sker ved tilføje følgende JavaScript-fil ved navn script.js til Guide-folderen.

$(function() {
$('#adresse').dawaautocomplete({
select: function(event, data) {
$('#adresse-choice').text(data.tekst);
}
});
});

Det er html-filen, som skal anvende ovenstående kode til at etablere forbindelsen mellem input-feltet og autocomplete komponenten, så html-filen skal referere til JavaScript-filen script.js. Det sker på følgende måde:

<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>DAWA autocomplete guide</title>
</head>
<link rel="stylesheet" href="bower_components/jquery-ui/themes/start/jquery-ui.css">
<link rel="stylesheet" href="bower_components/jquery-ui/themes/start/theme.css">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/dawa-autocomplete/dawa-autocomplete.js"></script>
<script src="script.js"></script>
<body>
<label for='adresse'>Autocomplete af adresse:</label>
<input type="text" id="adresse" style="width: 400px;">
<p>Valgt adresse: <span id="adresse-choice"/></p>
</body>
</html>

Trin 5 - Prøv

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