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.

alextea

$(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 = []

alextea

Commodore 64

Hardware:

• Commodore 64
• Power supply
• Datasette Tape Deck
• Atari joystick controller

Games:

alextea

export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8
export PATH="/usr/local/bin:/usr/local/sbin:/usr/local/mysql/bin:/usr/local/git/bin:~/.local/bin:$PATH"
source ~/.git-completion.bash

# Get the name of the branch we are on
git_prompt_info() {
  branch_prompt=$(__git_ps1)
  if [ -n "$branch_prompt" ]; then
    echo $branch_prompt

alextea

RPA
https://www.gov.uk/government/organisations/rural-payments-agency
https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/58/RPA_582_SML_AW-_12mm-crest___Ex_.jpg

APHA
https://www.gov.uk/government/organisations/animal-and-plant-health-agency
https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/1079/A_PHA_582_AW.png

UK Hydrographic Office
https://www.gov.uk/government/organisations/uk-hydrographic-office

alextea

<div class="grid-row">
  <div class="available-languages">
    <ul>
      <li class="translation">
        <span>English</span>
      </li>
      <li class="translation last">
        <a lang="cy" hreflang="cy" href="/dechrau">Cymraeg</a>
      </li>
    </ul>

alextea

# NeoPixel library strandtest example
# Author: Tony DiCola (tony@tonydicola.com)
#
# Direct port of the Arduino NeoPixel library strandtest example.  Showcases
# various animations on a strip of NeoPixels.
import time
from neopixel import *

# LED strip configuration:
LED_COUNT      = 50      # Number of LED pixels.

alextea

# template tag
\{\{<([^}]+)\}\}
{% extends "$1.html" %}

# includes tag
\{\{>([^}]+)\}\}
{% include "$1.html" %}

# block tag
\{\{\$([^}]+)\}\}

alextea

Top records & reissues 2015

##Albums

• Colleen – Captain of None (Thrill Jockey)
• dbh – Mood (Thread)
• Floating Points – Elaenia (Eglo)
• Helm – Olympic Mess (Pan)
• Hunnee – Hunch Music (Rush Hour)
• Strategy – Pods of Punishment / Seeds of Paradise (Entr’acte / Idle Hands)

alextea

function highlightcells() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var allData = sheet.getDataRange();
  var dataRange = sheet.getRange(2,3,allData.getLastRow(),allData.getLastColumn());
  var data = dataRange.getValues();
  
  // iterate over data
  var values = [];
  
  for (var i = 0; i < data.length; i++) {