Component

Autocomplete

An autocomplete component, built to be accessible

This component is build using Accessible Autocomplete.

Typically it is used to enhance a select element with autocomplete options.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Select your country

How to call this component

<%= render "components/autocomplete", {
  id: "autocomplete",
  name: "autocomplete",
  label: {
    text: "Select your country"
  },
  select: {
    options: [
      [
        null
      ],
      [
        "France",
        "fr"
      ],
      [
        "Germany",
        "de"
      ],
      [
        "United Kingdom",
        "uk"
      ]
    ]
  }
} %>

Accessibility acceptance criteria

Other examples

With selected value (preview)

Select your country Only a few countries are available

<%= render "components/autocomplete", {
  id: "autocomplete-selected",
  name: "autocomplete-selected",
  label: {
    text: "Select your country",
    bold: true
  },
  hint: "Only a few countries are available",
  select: {
    options: [
      [
        "France",
        "fr"
      ],
      [
        "Germany",
        "de"
      ],
      [
        "United Kingdom",
        "uk"
      ]
    ],
    selected: "de"
  }
} %>

With error (preview)

Autocomplete with error

Error: There is a problem with this input

<%= render "components/autocomplete", {
  name: "autocomplete-with-error",
  label: {
    text: "Autocomplete with error"
  },
  select: {
    options: [
      [
        "France",
        "fr"
      ],
      [
        "Germany",
        "de"
      ],
      [
        "United Kingdom",
        "uk"
      ]
    ]
  },
  error_items: [
    {
      text: "There is a problem with this input"
    }
  ]
} %>

Select multiple (preview)

Select your country To select multiple items in a list, hold down Ctrl (PC) or Command (Mac) key.

<%= render "components/autocomplete", {
  id: "autocomplete-multiselect",
  name: "autocomplete-multiselect",
  label: {
    text: "Select your country"
  },
  select: {
    multiple: true,
    options: [
      [
        "France",
        "fr"
      ],
      [
        "Germany",
        "de"
      ],
      [
        "United Kingdom",
        "uk"
      ]
    ],
    selected: [
      "fr",
      "de"
    ]
  }
} %>

Autocomplete narrow width (preview)

Status

<%= render "components/autocomplete", {
  id: "autocomplete-narrow",
  name: "autocomplete-narrow",
  label: {
    text: "Status"
  },
  width: "narrow",
  select: {
    options: [
      [
        "Draft"
      ],
      [
        "Published"
      ],
      [
        "Removed"
      ]
    ]
  }
} %>

Autocomplete input (preview)

An enhancement to an input element. Options are provided via a datalist. A user can enter a value outside the list of options.

Select your country

<%= render "components/autocomplete", {
  id: "autocomplete-input",
  name: "autocomplete-input",
  label: {
    text: "Select your country"
  },
  input: {
    value: "France",
    options: [
      "France",
      "United Arab Emirates",
      "United Kingdom"
    ]
  }
} %>

Autocomplete without narrowing results (preview)

An enhancement to an input element. All options (provided by a datalist) are shown whenever the input is focused. A user can enter a value outside the list of options.

Select your country The full list will show when you interact with the input

<%= render "components/autocomplete", {
  id: "autocomplete-without-narrowing-results",
  name: "autocomplete-without-narrowing-results",
  data_attributes: {
    "autocomplete-without-narrowing-results": true
  },
  label: {
    text: "Select your country",
    bold: true
  },
  hint: "The full list will show when you interact with the input",
  input: {
    value: "France",
    options: [
      "France",
      "United Arab Emirates",
      "United Kingdom"
    ]
  }
} %>

Autocomplete search (preview)

This is used to style the autocomplete as a search. If applied to an input element the underlying input is rendered with type “search” rather than “text”.

<%= render "components/autocomplete", {
  id: "autocomplete-search",
  name: "autocomplete-search",
  label: {
    text: "Search"
  },
  search: true,
  input: {
    options: [
      "France",
      "Germany",
      "United Kingdom"
    ]
  }
} %>

Autocomplete js only (preview)

Shows an autocomplete component only if JavaScript is enabled. This is used when the search input requires a JavaScript request to return results.

<%= render "components/autocomplete", {
  id: "autocomplete-jsonly",
  name: "autocomplete-jsonly",
  label: {
    text: "Search"
  },
  search: true,
  jsonly: true,
  input: {
    options: [
      "France",
      "Germany",
      "United Kingdom"
    ]
  }
} %>