Suggest Austria Street number Step by step
Suggest a Austria address.
Note: This is the documentation for the v2 API which is still in beta.
Step 1: build the HTML page
We start by creating an empty HTML page, containing a minimal web page structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AT Suggest tutorial</title>
</head>
<body></body>
</html>
Add the following code between the <body>
and </body>
tags.
<form class="form" id="form">
<div>Call</div>
<div>
<label for="street">street:</label>
<input id="street" class="street" placeholder="Albert Kollmann-Straße"/>
<label for="postalCode">postalCode:</label>
<input id="postalCode" class="postalCode" placeholder="7000"/>
<label for="settlement">settlement:</label>
<input id="settlement" class="settlement" placeholder="Eisenstadt"/>
<label for="streetNumber">streetNumber:</label>
<input id="streetNumber" class="streetNumber" placeholder="7"/>
<label for="streetNumberAndPremise">streetNumberAndPremise:</label>
<input id="streetNumberAndPremise" class="streetNumberAndPremise" placeholder="128 Tischlerei"/>
<label for="premise">premise:</label>
<input id="premise" class="premise" placeholder="Tischlerei"/>
<label for="maxResults">maxResults:</label>
<input id="maxResults" class="maxResults" placeholder="1"/>
<label for="cursor">cursor:</label>
<input id="cursor" class="cursor" placeholder=""/>
</div>
<div>
<span style="color: red" class="message"></span>
</div>
<div>
<button type="submit">Submit</button>
</div>
<br />
<div>Response</div>
<br />
<div>Full Response</div>
<pre class="jsonResponse"></pre>
</form>
It adds the input fields for entering the address.
Step 2: add interaction
Add the following JavaScript code in a separate .js
file. The IDs and Class names of the HTML elements should match with the ones specified in this JavaScript file in order to get the correct results.
Step 3: make it work
Link the JavaScript file inside the .html
right before closing the </body>
tag. Replace {filename}
with your actual JavaScript file name.
<script src="{filename}.js"></script>
To access the Pro6PP web service, you need to request your personal authorization key. This key is emailed to you right after signing up.
Replace the above placeholder AUTH_KEY with your personal authorization key.
Step 4: see it in action
Open the .html
file in your browser. It's ready to use! It doesn't work? Try downloading the ready-to-use example code.