Alex Torrance alextea

Using accessible autocomplete in the GOV.UK prototype kit

This is a step by step guide on how to use the accessible autocomplete component in the GOV.UK prototype kit. There aren’t any instructions included with the code for using with the prototype kit, and it’s not straightforward if you’re not familiar with javascript.

I have an example repo you can download to check the code.

Download

Download the accessible autocomplete code, you can download the zip or clone the repo if you prefer to use git.

Copy the files to your prototype

Copy the minified files from the /dist folder to your prototype.

Potential site constraint: Flood zone 3

Is any development proposed in the area falling within Flood Zone 3?

( ) No, I understand that a flood risk assessment is needed for this site ( ) Yes ( ) I don't want to provide a mitigation for this risk right now

[+ Save and continue] [Back]

	$(document).ready(function () {
	window.GOVUKFrontend.initAll()

	let selectElement = document.querySelector('#my-category-select')

	accessibleAutocomplete.enhanceSelectElement({
	defaultValue: '',
	source: (query, populateResults) => {
	const options = selectElement.querySelectorAll('option')
	let results = []