Combobox/typeahead lookup component

[scottanthonymurray]

New component

Another frequent request and Q3 priority is a typeahead lookup component where the user can start typing a search term and be presented with a list of matches from a set of data. This is another design pattern that is very tricky to actually make accessible to screen readers and keyboard-only users. The gov.UK team has done a lot of work and testing on their solution, which they have also open-sourced here:

https://github.com/alphagov/accessible-autocomplete

You can see some examples of the different configuration options here:

https://alphagov.github.io/accessible-autocomplete/examples/

@AhLord did some testing with this a while back, and it seems to be a pretty good solution to a difficult problem. The gov.uk plugin has a lot of nice options including the ability to pass in a cssNamespace option that can be used for theming. I've done a bit more on the theming and a simplified use case based on Austin's original prototype here:

https://codepen.io/levimcg/pen/gjRaLB

[basham]

mtwagner commented on Oct 25, 2018

---

will the source be able to be the returned results of an ajax call? Thanks. Sorry about the duplicate.

[basham]

lmcgrana commented on Oct 25, 2018

---

@mtwagner No problem at all! That's a good question. There My initial thoughts are to make the source/data that gets filtered part of a config option. This one will be a bit different form other Rivet JavaScript components/plugins in that each autocomplete/combo box will need to be instantiated and configured so that you can control things like the data source.

So I'm thinking some thing like:

const myFirstAutocomplete = new RivetAutoComplete({
  data: sourceData,
  // Other config options
});
I think we could design it so that sourceData is either:

An array of synchronous/static results (Strings) e.g. `['Leslie Knope', 'Ron Swanson', 'Bert Macklin']
A function that returns an array of results (Strings)
That way if data in the example above is a function you could do your ajax calls there. Haven't given this tons of thought, but that's what I'd like to end up with. I'm still working my way through this one as it's a real beast in terms of making it accessible/usable for folks using screen readers.

Here's a link to a very early prototype I started. There's still a lot of work to be done in terms of accessibility (keyboard navigation, labeling, etc.).

https://codepen.io/levimcg/pen/XPyxyW

Would love to hear some thoughts on how you see it working and what all types of options you'd like to have. Thanks! 🙌