blob: ca5eb17f0f0eb6d9e0a56d1c45e638eaeba60730 (
plain) (
blame)
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
|
p
| Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
.docs-demo.columns
.column.col-9.col-xs-12
.form-group
.form-autocomplete
.form-autocomplete-input.form-input
span.chip
| Bruce Banner
.chip
img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar")
| Thor Odinson
.chip
img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar")
| Steve Rogers
.chip
figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
| Tony Stark
span.chip.active
| Natasha Romanoff
input.form-input(type="text" placeholder="")
.column.col-9.col-xs-12
.form-group
.form-autocomplete
.form-autocomplete-input.form-input.is-focused
span.chip
| Bruce Banner
a.btn.btn-clear(href="#" aria-label="Close" role="button")
span.chip
img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson")
| Thor Odinson
a.btn.btn-clear(href="#" aria-label="Close" role="button")
.has-icon-left
input.form-input(type="text" placeholder="" value="S")
i.form-icon.loading
ul.menu
li.menu-item
a(href="#autocomplete")
.tile.tile-centered
.tile-icon
img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers")
.tile-content
mark S
| teve Roger
mark s
li.menu-item
a(href="#autocomplete")
.tile.tile-centered
.tile-icon
figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
.tile-content
| Tony
mark S
| tark
p
| Add a container element with the #[code form-autocomplete] class.
| There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component.
| You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state.
p
| Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
| The autocomplete HTML structure is exampled below.
.docs-demo.columns
.column.col-9.col-xs-12
.form-group
.form-autocomplete.autocomplete-oneline
.form-autocomplete-input.form-input
span.chip
| Bruce Banner
.chip
img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar")
| Thor Odinson
.chip
img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar")
| Steve Rogers
.chip
figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
| Tony Stark
span.chip.active
| Natasha Romanoff
input.form-input(type="text" placeholder="")
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="form-autocomplete">
<!-- autocomplete input container -->
<div class="form-autocomplete-input form-input">
<!-- autocomplete chips -->
<div class="chip">
<img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
Thor Odinson
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</div>
<!-- autocomplete real input box -->
<input class="form-input" type="text" placeholder="typing here">
</div>
<!-- autocomplete suggestion list -->
<ul class="menu">
<!-- menu list items -->
<li class="menu-item">
<a href="#">
<div class="tile tile-centered">
<div class="tile-icon">
...
</div>
<div class="tile-content">
...
</div>
</div>
</a>
</li>
</ul>
</div>
|
