Skip to content

Commit f21c097

Browse files
committed
add prototype kit instructions
1 parent e95884b commit f21c097

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,50 @@ You can copy the [dist/accessible-autocomplete.min.js](dist/accessible-autocompl
7575
<script type="text/javascript" src="assets/js/accessible-autocomplete.min.js"></script>
7676
```
7777

78+
### As a GOV.UK Prototype Kit plugin
79+
80+
In your prototype folder, run:
81+
82+
```bash
83+
npm install accessible-autocomplete
84+
```
85+
86+
This will load the accessible autocomplete CSS and JavaScript for you.
87+
88+
Then on the page you want to add the accessible autocomplete:
89+
90+
```html
91+
<label for="my-autocomplete">Select your country</label>
92+
<div id="my-autocomplete-container"></div>
93+
```
94+
95+
At the end of the file add a `pageScripts` block for the JavaScript:
96+
97+
```js
98+
<% block pageScripts %>
99+
100+
<script>
101+
102+
const countries = [
103+
'France',
104+
'Germany',
105+
'United Kingdom'
106+
]
107+
108+
accessibleAutocomplete({
109+
element: document.querySelector('#my-autocomplete-container'),
110+
id: 'my-autocomplete', // To match it to the existing <label>.
111+
source: countries
112+
})
113+
114+
</script>
115+
116+
<% endblock %>
117+
118+
```
119+
120+
If you want to use it as a replacement for a `<select>` element, read the [Progressive enhancement](#progressive-enhancement) section.
121+
78122
### Styling the autocomplete
79123

80124
A stylesheet is included with the package at [dist/accessible-autocomplete.min.css](dist/accessible-autocomplete.min.css).

0 commit comments

Comments
 (0)