Add Autocomplete component

[zemirco]

It would be nice to have some sort of Autocomplete component. An input that behaves similarly to a select, with the addition of a free text input to filter options.

Ant Design
https://ant.design/components/auto-complete

Salesforce Lightning Design System
https://www.lightningdesignsystem.com/components/combobox/#Autocomplete-Combobox

J Sainsbury plc Group
https://luna-website.ext.prd.jspaas.uk/components/autocomplete/

Adobe Spectrum
https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#asynchronous-loading

Twilio Paste
https://paste.twilio.design/components/combobox/#autocomplete-combobox

Palantir Blueprint
https://blueprintjs.com/docs/#select/suggest2

[borisdiakur]

Hi @zemirco 👋
Thank you for this feature request 🙏

Although not quite the same, this partially overlaps with the ld-select filter feature. We'll have a look into the examples you posted and see how we can integrate this in liquid.

[zemirco]

Hey @borisdiakur,

good stuff! To be honest I didn't see the ld-select with filter feature. It's great!

However I think the use case for an autocomplete is a bit different.

1. The data is not completely available on the client. Think about the Google search. The client does not have the data but instead is fetching the data from the backend while the user is typing. It's a little more than simply filtering the data in the frontend.

2. For a greater UI/UX fuzzy search might be a nice feature. When I enter wy it would be nice to find "Strawberry".

3. Highlight matching text. While typing it would be great to highlight or mark matching text. So when I enter "stra" I would be nice to see "Strawberry" in the list with "Stra" in bold.

[ArpithaKamath]

Hey,

Also it would be nice to have creatable option so that whenever the option is not present the drop down accepts an input. Example:

https://react-select.com/creatable

[renet]

I think we should clarify about the title of this issue. It mentions an "autocomplete" component, which in my opinion actually is more the Google search input use case where whatever API is being called with the typed input and suggestions are loaded accordingly trying to guess and suggestion extension for what the user is probably about to type.

This is rather a text input field than a select component. Examples from Salesforce Lightning Design System, Google and maybe Palantir Blueprint would match this behavior.

Whereas the other examples are more of a select component with filter functionality (maybe with additional "creatable" functionality). Be it a set of tags (multi select) or a simple single select, but those filter on a set of existing options (even though these may be searched for and loaded asynchronously).

I think we should differentiate between those two options and they maybe should be part of two different components (just as ld-select and ld-input are different components) because even though they may optically look almost the same, they are very different, semantically.

@zemirco do you see the difference that I see here, as well? And which one did you intend to ask for in the first place? Should we open a second issue for the other one?

[renet]

Regarding the autocomplete functionality, I just discovered a new library that might be useful here: https://github.com/algolia/autocomplete (Afaik this is independent from using Algolia.)

[zemirco]

Thank you for bringing up the algolia autocomplete. It looks really great and also provides a tight React integration.

https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-react/

Our applications in the end would still face the problem of styling and customizing the component to ensure we're following Liquid Design. Ideally we would have something in the library that is easy to consume and adheres to all the design standards. Right now there is a gap and I would love to see this gap filled.

I also used downshift in the past and it also worked great but again that would mean extra work for our product development teams.

https://github.com/downshift-js/downshift

I would start with the simpler one and see how users like and use it. When there's still functionality missing we either enrich the existing component or build another specialized one.

[nimeshmk]

Hi Team, Any update on the autocomplete component.