-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (142 loc) · 7.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link href="../assets/images/favicon-16x16.png" rel="icon" type="image/x-icon">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- JavaScript-->
<script type="text/javascript" src="main.js"></script>
<!-- CSS-->
<link rel="stylesheet" href="https://fed.kp.org/styleguide-archive/4.0/main.css" />
<link rel="stylesheet" href="main.css" />
<style>
.demo-box {
margin: 20px 0;
}
</style>
</head>
<body class="kp-theme-ds2">
<main>
<h1 style="text-align: center;">Search</h1>
<p class="styling-4">Global Search - Exposed Search (for Header Pattern 10.x)</p>
<!-- autocomplete search pattern -->
<div
class="autocomplete-search -ds2 -exposed-search"
data-recommended-links="true"
data-recommended-links-url="recommended-links.json"
data-recommended-links-announcement="displaying recommended links"
data-recommended-links-tracking="Recommended Links"
data-search-suggestions="true"
data-search-suggestions-url="search-suggestions.json"
data-search-suggestions-announcement="displaying search suggestions"
data-search-suggestions-tracking="Suggested Queries"
data-reset-announcement="no recommendations or suggestions"
data-input-width=""
data-analytics-location="Autocomplete Search"
>
<form class="autocomplete-search__form" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" method="get" onsubmit="return false" action="">
<div class="autocomplete-search__top-bar">
<div class="autocomplete-search__combobox clear-input-field">
<label class="autocomplete-search__label screenreader-only">Search</label>
<div class="autocomplete-search__input__container">
<input role="combobox" class="autocomplete-search__input clear-input-textbox" type="text" placeholder="Type keyword" aria-expanded="false" />
<button class="clear-input-button" aria-label="Clear this search field" type="button"><img class="-close-icon" src="assets/images/cancel-circle.svg" alt="" width="20px" height="20px"/></button>
</div>
</div>
<div class="search-button-container">
<button class="autocomplete-search__submit button" type="submit">
<img class="search-icon" src="assets/images/search.svg" alt="" width="18px" height="19px" />Search
</button>
</div>
</div>
<div class="container--ds2" role="application">
<fieldset class="autocomplete-search__listbox -hidden"></fieldset>
</div>
</form>
</div>
<!-- /autocomplete search pattern -->
<hr style="margin: 35px 0;">
<p class="styling-4" style="margin-top: 10px;">Global Search</p>
<p>This example fetches JSON to populate the "Popular search links" and Search Suggestions.</p>
<!-- autocomplete search pattern -->
<div
class="autocomplete-search -ds2"
data-recommended-links="true"
data-recommended-links-url="recommended-links.json"
data-recommended-links-announcement="displaying recommended links"
data-recommended-links-tracking="Recommended Links"
data-search-suggestions="true"
data-search-suggestions-url="search-suggestions.json"
data-search-suggestions-announcement="displaying search suggestions"
data-search-suggestions-tracking="Suggested Queries"
data-reset-announcement="no recommendations or suggestions"
data-input-width=""
data-analytics-location="Autocomplete Search"
>
<button class="autocomplete-search__close button" aria-label="close this search" type="button">
<img class="autocomplete-search__close__icon" src="assets/images/close.svg" width="14px" height="14px" alt="" />Close
</button>
<form class="autocomplete-search__form" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" method="get" onsubmit="return false" action="">
<img src="assets/images/kp-logo-signature-stacked.svg" class="autocomplete-search__logo" alt="Kaiser Permanente logo" width="120px" height="38px">
<div class="autocomplete-search__combobox clear-input-field">
<label class="autocomplete-search__label screenreader-only">Search
</label>
<div class="autocomplete-search__input__container">
<input role="combobox" class="autocomplete-search__input clear-input-textbox" type="text"
placeholder="Type keyword" aria-expanded="false" />
<button class="clear-input-button" aria-label="Clear this search field" type="button"><img class="-close-icon" src="assets/images/cancel-circle.svg" alt="" width="20px" height="20px"/></button>
</div>
</div>
<div class="search-button-container">
<button class="autocomplete-search__submit button" type="submit">
<img class="search-icon" src="assets/images/search.svg" alt="" width="18px" height="19px" />Search
</button>
</div>
<div class="container--ds2" role="application">
<fieldset class="autocomplete-search__listbox -hidden"></fieldset>
</div>
</form>
</div>
<!-- /autocomplete search pattern -->
<hr style="margin: 35px 0;">
<p class="styling-4">Contextual Search</p>
<p>This example fetches JSON to populate the "Popular search links" and Search Suggestions.</p>
<br>
<div class="container">
<!-- autocomplete search patern - contextual -->
<div
class="autocomplete-search -ds2 -contextual-search"
data-recommended-links="true"
data-recommended-links-url="recommended-links.json"
data-recommended-links-announcement="displaying recommended links"
data-recommended-links-tracking="Recommended Links"
data-search-suggestions="true"
data-search-suggestions-url="search-suggestions.json"
data-search-suggestions-announcement="displaying search suggestions"
data-search-suggestions-tracking="Suggested Queries"
data-reset-announcement="no recommendations or suggestions"
data-input-width=""
data-analytics-location="Autocomplete Search"
data-ds-theme="vessel"
data-ds-version="3"
data-ds-variant="contextual-search">
<form class="autocomplete-search__form" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" method="get" onsubmit="return false" action="">
<label class="autocomplete-search__label">Contextual search label</label>
<div class="autocomplete-search__combobox clear-input-field" role="application">
<input class="autocomplete-search__input clear-input-textbox contextual-input" type="text" placeholder="Type keyword to search" role="combobox" aria-expanded="false">
<fieldset class="autocomplete-search__listbox -hidden"></fieldset>
<button class="clear-input-button" aria-label="clear this search field" type="button"><img class="" src="assets/images/clear_x.svg" alt=""></button>
</div>
<button class="autocomplete-search__submit button" type="submit">Search</button>
</form>
<div class="autocomplete-search__manual" aria-hidden="true"></div>
<div class="autocomplete-search__manual-search" aria-hidden="true"></div>
</div>
<!-- /autocomplete search pattern - contextual -->
</div>
</main>
</body>
</html>