forked from experianplc/Experian-Address-Validation
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (144 loc) · 8.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Experian Address Validation - sample page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/css/demo.css">
<link rel="stylesheet" type="text/css" href="dist/css/experian-address-validation.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="./dist/images/favicon.png">
</head>
<body spellcheck="false">
<div class="page-header">
<img src="dist/images/logo.png" width="137" height="60" loading="eager" decoding="async" alt="Experian logo">
</div>
<div class="hero-header">
<h1>Experian Address Validation</h1>
</div>
<div class="intro">
<p>Welcome to our Experian Address Validation demo. Here you can try some of our available search types.</p>
<form class="token-prompt hidden" onsubmit="addToken(); return false;">
Please enter a valid token to get started:<br>
<input type="text" name="token" class="token-input"> <button>Go</button><br>
<small>Or <a href='https://github.com/experianplc/Experian-Address-Validation#tokens' target="_blank">find out how to get a token</a> if you don't have one.</small>
</form>
</div>
<main>
<div class="search-type-panel">
<label for="country">Select country dataset</label>
<select name="country" id="country">
<!--Add/remove your supported countries here -->
<option value="">Please select</option>
</select>
<label>Choose search type</label>
<div class="search-type-dropdown">
<label class="search-type-selector search-type-selected" for="autocomplete-radio" data-panel-type="autocomplete">
<div class="panel-content">
<h5 class="header">Predict the address as I type</h5>
<input type="radio" name="search-type-radio" id="autocomplete-radio" value="autocomplete" checked>
<a href="https://docs.experianaperture.io/address-validation/experian-address-validation/address-search-types/autocomplete/" target="_blank">Autocomplete</a> search is designed to provide accurate suggestions in real-time. You can also use what3words as an input (UK only).
</div>
</label>
<label class="search-type-selector" for="validate-radio" data-panel-type="validate">
<div class="panel-content">
<h5 class="header">Enter the full address, then get results</h5>
<input type="radio" name="search-type-radio" id="validate-radio" value="validate">
<a href="https://docs.experianaperture.io/address-validation/experian-address-validation/address-search-types/validate/" target="_blank">Validate</a> search is designed to verify complete addresses.
</div>
</label>
<label class="search-type-selector" for="singleline-radio" data-panel-type="singleline">
<div class="panel-content">
<h5 class="header">Enter partial address, then get results</h5>
<input type="radio" name="search-type-radio" id="singleline-radio" value="singleline">
<a href="https://docs.experianaperture.io/address-validation/experian-address-validation/address-search-types/singleline/" target="_blank">Singleline</a> search is designed to find an exact or close match to an address based on two or three key address elements.
</div>
</label>
<label class="search-type-selector" for="lookupv2-radio" data-panel-type="lookupv2">
<div class="panel-content">
<h5 class="header">Enter postcode or locality, then get results</h5>
<input type="radio" name="search-type-radio" id="lookupv2-radio" value="lookupv2">
<a href="https://docs.experianaperture.io/address-validation/experian-address-validation/address-search-types/lookup/#lookup-v2" target="_blank">Lookup v2</a> search is designed to determine locality information using postal/ZIP code of an address, & vice versa.
</div>
</label>
</div>
</div>
<form>
<div class="loader loader-overlay hidden">
<div class="spinner"></div>
</div>
<div class="promptset">
<div class="address-field-inputs"></div>
<button id="find-address-button" class="hidden">Find address</button>
</div>
<div class="formatted-address hidden">
<label for="address_line_1">Address line 1</label>
<input type="text" name="address_line_1" id="address_line_1">
<label for="address_line_2">Address line 2</label>
<input type="text" name="address_line_2" id="address_line_2">
<label for="locality">Locality</label>
<input type="text" name="locality" id="locality">
<label for="region">Region</label>
<input type="text" name="region" id="region">
<label for="postal_code">Postal code</label>
<input type="text" name="postal_code" id="postal_code">
<label for="country">Country</label>
<input type="text" name="country" id="country">
</div>
<div class="error-display hidden">
<label class="error-msg"></label>
</div>
</form>
<aside class="metadata invisible">
<div class="validated-address-info" id="validated-address-info">
<h2>Validated address information</h2>
<span class="collapsible">
<span class="hide">[Hide]</span>
<span class="show hidden">[Show]</span>
</span>
<div class="content">
<div class="data-grid">
<span id="confidence-key"></span><span id="confidence-value"></span>
<span id="delivery-type-key"></span><span id="delivery-type-value"></span>
<span id="delivery-address-key"></span><span id="delivery-address-value"></span>
<span id="what3words-key" class="hidden"><img src="./dist/images/w3w.png"/></span><span id="what3words-value" class="hidden"></span>
</div>
</div>
</div>
<div class="components-collection hidden" id="components-collection">
<h2>Address components</h2>
<span class="collapsible">
<span class="hide hidden">[Hide]</span>
<span class="show">[Show]</span>
</span>
<div class="content" style="display: none;"></div>
</div>
<div class="metadata-collection hidden" id="metadata-collection">
<h2>Address metadata</h2>
<span class="collapsible">
<span class="hide hidden">[Hide]</span>
<span class="show">[Show]</span>
</span>
<div class="content" style="display: none;"></div>
</div>
<div class="enrichment hidden" id="enrichment">
<h2>Enrichment</h2>
<span class="collapsible">
<span class="hide hidden">[Hide]</span>
<span class="show">[Show]</span>
</span>
<div class="content" style="display: none;"></div>
</div>
<div class="map hidden" id="map"></div>
<a href="https://github.com/experianplc/Experian-Address-Validation" target="_blank" class="download-button">Download sample code</a>
</aside>
</main>
<script src="dist/js/experian-address-validation.js"></script>
<script src="dist/js/search-address-handling.js"></script>
<script src="dist/js/address-metadata-display.js"></script>
</body>
</html>