RFC: Menu with searchable behaviour

[Haroenv]

Summary

Just like refinementList, there are some cases in which you'd want to search within the options, even if there's only one option that can be chosen

Basic example

search.addWidget(
  instantsearch.widgets.menu({
    container: "#menu",
    attribute: "country",
    searchable: true,
  })
);

Motivation

When a list of items, where only one can be choses, is really long, it gets complicated to show all options. For that reason we added search for facet values on refinement lists. This behaviour also applies to Menu. An example of a long list with only one choice is countries

Detailed design

1. add searchForItems (fn) to the connector
2. implement it the same as for refinementList (link)
3. add searchable option to widget
4. add the searchbox etc. to the widget as necessary
5. implement in Vue InstantSearch and Angular InstantSearch

Drawbacks

Why should we not do this? Please consider:

• code size increase
  • should not be too big, because it's code which is very close to the refinement list code
• timing
  • we can wait until Vue InstantSearch has moved to connectors in beta so we don't need to wait for this to be implemented

Alternatives

Using a refinement list and allowing selection of multiple values, or hacking around in that function to make sure only one refinement is possible. This doesn't seem like that good of an alternative to be honest.

How we teach this

Update the documentation, maybe a guide for searchable lists in general like React InstantSearch