Support for key/value mappings to set predictable ids/values

[stuaxo]

Hi,
I realise this project isn't supported as such, so this is more like feedback.
On a project we are building at DIT, it's been hard to use accessible autocomplete, as it doesn't seem to easily give control over the values submitted (vs the text displayed).

You support arrays of values [1], it seems like an obvious thing to also allow key/value [2]

[1] Array example from the docs

import accessibleAutocomplete from 'accessible-autocomplete'

const countries = [
  'France',
  'Germany',
  'United Kingdom'
]

accessibleAutocomplete({
  element: document.querySelector('#my-autocomplete-container'),
  id: 'my-autocomplete', // To match it to the existing <label>.
  source: countries
})

[2] key/value example (not in the docs):

import accessibleAutocomplete from 'accessible-autocomplete'

const countries = {
  'fr: 'France',
  'de': 'Germany',
  'uk': 'United Kingdom'
}

accessibleAutocomplete({
  element: document.querySelector('#my-autocomplete-container'),
  id: 'my-autocomplete', // To match it to the existing <label>.
  source: countries
})

The above seems like a logical extension - it would certainly have made things easier in the app we're building.

[edwardhorsford]

@stuaxo On our service, when a user picks a result, our onConfirm function populates a hidden input with a different value - the uuid of the selected item.

It would probably be nice if this was built in, but might be an option for you.

[stuaxo]

@edwardhorsford thanks for writing this, we came to the same solution, after a bit of digging into the code.

I added the ticket, as it wasn't immediately obvious and it feels like we're fighting accessible-autocomplete to do something you do on day zero with <select><option>.