Autocomplete example

Autocomplete without narrowing results

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.

How it looks (preview)

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

How to call this example

<%= 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"
    ]
  }
} %>