forked from experiandataquality/GlobalIntuitive
-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
171 lines (154 loc) · 9.03 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
162
163
164
165
166
167
168
169
170
171
<!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 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 class="hidden" data-panel-type="autocomplete validate singleline typedown lookupv2">Choose search type</label>
<div class="search-type-dropdown">
<label class="search-type-selector search-type-selected hidden" for="combined-radio" data-panel-type="combined">
<div class="panel-content">
<h5 class="header">Combination of available search types resulting in best UX for your end user</h5>
<input type="radio" name="search-type-radio" id="combined-radio" value="combined">
Designed to provide accurate suggestions in real-time. Combining Autocomplete with Lookup based on the user's input. Start by typing an address or lookup addresses by postal code, what3words, UDPRN, or utility meter numbers.<br>
Available lookup types depend on the selected country dataset.
</div>
</label>
<label class="hidden" data-panel-type="combined">Or try our search types in isolation</label>
<label class="search-type-selector hidden" 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">
<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.
</div>
</label>
<label class="search-type-selector hidden" 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 hidden" 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 hidden" 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> is designed to return an address based on a key lookup as well as determine locality information using postal code of an address, and vice versa.<br>
Available lookup types depend on the selected country dataset.
</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>