File tree Expand file tree Collapse file tree 1 file changed +44
-0
lines changed
Expand file tree Collapse file tree 1 file changed +44
-0
lines changed Original file line number Diff line number Diff 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
80124A stylesheet is included with the package at [ dist/accessible-autocomplete.min.css] ( dist/accessible-autocomplete.min.css ) .
You can’t perform that action at this time.
0 commit comments