This repository has been archived by the owner on Oct 22, 2019. It is now read-only.
/
Autosuggest.html
181 lines (170 loc) · 8.13 KB
/
Autosuggest.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
172
173
174
175
176
177
178
179
180
181
<!---
preview: default
--->
<!--
## Introduction
This sample showcases how to implement an interactive autosuggest form field.
The example below suggests cities in an address form, but the list of
suggestions may contain any content, such as anticipated search queries, or
product listings with images. You can see the full demo [here](./preview). For
a more complex example implementing an address input form with autosuggestion,
take a look at [this sample](/advanced/autosuggest_form/).
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Simple Autosuggest</title>
<link rel="canonical" href="/advanced/autosuggest/" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Next we include `amp-selector` to easily display results in an accessible list. -->
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<!-- Then we include `amp-list` to request and display the autosuggest results. -->
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<!-- Then we include `amp-mustache` to render the mustache templates inside the `<amp-list>`. -->
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<!-- Finally we include `amp-bind` to track and update the page's state after user interactions.-->
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!--
## Styles
Only a few CSS rules are necessary to implement the autosuggest overlay.
-->
<style amp-custom>
/* --------------------------------
Necessary styles for the example
-------------------------------- */
:root {
--color-bg-light: #FAFAFC;
--autosuggest-width: 300px;
--space-1: .5rem; /* 8px */
--space-2: 1rem; /* 8px */
--box-shadow-1: 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 1px -1px rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
#auto-suggest {
position: absolute;
width: var(--autosuggest-width);
overflow-x: hidden;
z-index: 100;
box-shadow: var(--box-shadow-1);
background-color: var(--color-bg-light);
}
#auto-suggest [option] {
padding: var(--space-1);
}
/* ---------------------------------
Additional non-autosuggest styles
--------------------------------- */
.preview-container {
min-width: 320px;
padding: var(--space-2);
}
</style>
</head>
<body>
<div class="preview-container" on="tap: AMP.setState({ filteredCities: [] })" tabindex="0" role="button">
<!--
## Data source
First we need to add a data source. Here we're using an inline `amp-state` declaration defining a list of `cities` in the US.
For long lists of suggestions, it's possible to fetch `amp-state` from a remote JSON endpoint using the `src` attribute.
-->
<amp-state id="cities">
<script type="application/json">[
"Albany, New York",
"Annapolis, Maryland",
"Atlanta, Georgia",
"Augusta, Maine",
"Austin, Texas",
"Baton Rouge, Louisiana",
"Bismarck, North Dakota",
"Boise, Idaho",
"Boston, Massachusetts",
"Carson City, Nevada",
"Charleston, West Virginia",
"Cheyenne, Wyoming",
"Columbia, South Carolina",
"Columbus, Ohio",
"Concord, New Hampshire",
"Denver, Colorado",
"Des Moines, Iowa",
"Dover, Delaware",
"Frankfort, Kentucky",
"Harrisburg, Pennsylvania",
"Hartford, Connecticut",
"Helena, Montana",
"Honolulu, Hawaii",
"Indianapolis, Indiana",
"Jackson, Mississippi",
"Jefferson City, Missouri",
"Juneau, Alaska",
"Lansing, Michigan",
"Lincoln, Nebraska",
"Little Rock, Arkansas",
"Madison, Wisconsin",
"Montgomery, Alabama",
"Montpelier, Vermont",
"Nashville, Tennessee",
"Oklahoma City, Oklahoma",
"Olympia, Washington",
"Phoenix, Arizona",
"Pierre, South Dakota",
"Providence, Rhode Island",
"Raleigh, North Carolina",
"Richmond, Virginia",
"Sacramento, California",
"Saint Paul, Minnesota",
"Salem, Oregon",
"Salt Lake City, Utah",
"Santa Fe, New Mexico",
"Springfield, Illinois",
"Tallahassee, Florida",
"Topeka, Kansas",
"Trenton, New Jersey"
]</script></amp-state>
<!--
## Text input
Next we define the input field. We listen to the [`input-debounced`](https://www.ampproject.org/docs/interaction_dynamic/amp-actions-and-events#input-elements) event
for text input. Based on the input, we filter the list of cities and write the result to a new `amp-state` variable `filteredCities`. If the input text is empty, we
don't want to show suggestions, which we avoid by return an empty array if the input text is empty: `event.value.length == 0 ? []: ...`. We also bind the input value
to a variable called `city`, which we'll use to set the value when the user clicks on a suggestion.
-->
<label>
Enter city:
<input [value]="city"
on="input-debounced: AMP.setState({
filteredCities: event.value.length == 0 ?
[]:
cities.filter(city =>
city.toLowerCase().indexOf(event.value.toLowerCase()) >= 0
)
})">
</label>
<!--
## Suggestion box
We use `amp-selector` to make the suggestions selectable. When the user clicks on a suggestions, the `select` event will be fired and the selected city
will be written to the `city` variable: `city: event.targetOption`. The `filteredCities` will be cleared, which also results in the suggestion box being hidden.
The Suggestion box will appear below the input field once the user enters text into the input field. It uses an `amp-list` to dynamically render the filtered suggestions: `[src]="filteredCities"`.
The list is initially hidden (`height="0"`) and will only be shown when `filteredCities` is not empty (`[height]="filteredCities.length * 34"`), where `34` is the height in pixels of a single
suggestion.
-->
<amp-selector on="select:AMP.setState({
city: event.targetOption,
filteredCities: []
})"
keyboard-select-mode="focus">
<amp-list id="auto-suggest"
items="."
layout="fixed-height"
height="0"
[src]="filteredCities"
[height]="filteredCities.length * 34">
<template type="amp-mustache">
<div option="{{.}}">{{.}}</div>
</template>
</amp-list>
</amp-selector>
</div>
</body>
</html>