DAWA Autocomplete er ikke den seneste version. Det anbefales, at anvende den seneste version, DAWA Autocomplete2, hvis guide du finder her.
Trin for trin guiden viser, hvordan du implementerer autocomplete indtastning af adresser vha. DAWA Autocomplete i en web applikation.
Du vil via et lille eksempel blive introduceret til, hvordan du anvender DAWA 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.
.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>
Se index.html i en browser.
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..
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>S
<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>
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>
Å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.