New Component: Autocomplete

[endigo9740]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

I'm marking this as a "feature" because I don't know if it should be a component or action yet. Perhaps a combination of the two, then treated as a utility?

General idea is when typing in an input you should see a list of suggested values. The HTML5 DataList can handle this, but I'm not sure about browse support and visual styling. Please review and discuss the capabilities with other contributors before implementing. Functionality matters first and foremost though.

If at all possible we should avoid reinventing the wheel here and creating this custom. However, if that is our only practical solution we can consider it. But again, let's review our options before a final decision is made!

What type of pull request would this be?

New Feature

Any links to similar examples or other references we should review?

Datalist Guide:
https://www.sitepoint.com/html5-datalist-autocomplete/

MDN reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Mantine reference:
https://mantine.dev/core/autocomplete/

[endigo9740]

After some research and testing, auto-complete is available in Chrome/Safari/Firefox, however they're not intended to be styled. Each browser has its own UI design for this. Unfortunately, if we wish to use this for our search modal we'll need to implement our own version of this.

[bato3]

I would like to propose attractions as an reference.

Example: https://illright.github.io/attractions//docs/components/autocomplete

[endigo9740]

Awesome, thank you @bato3!

[xmlking]

https://mskocik.github.io/svelecte/
I wish this component can be customize with tailwind css, that is why I want this component offered in skeleton

[robotcorner]

https://mskocik.github.io/svelecte/

This would be an awesome place to start. Talk about doing one thing seemingly really well.

[huntabyte]

@endigo9740 - I will take a stab at this one.

[endigo9740]

@huntabyte For sure go for it, the only thing I might suggest is seeing if we use this in some fashion for our doc search. The next few components I have slated to work on were all selected because they have place in the docs.

I'm 100% ok with the design changing (function > form here), but just a heads on my intentions!

Hit me up on Discord if you would like to discuss further.

[endigo9740]

@huntabyte Linking this here in case we need to access anything mentioned prior:

• Add Autocomplete component #758 (comment)

Thanks again for your help on this one!

[endigo9740]

@huntabyte Just checking the status on this one.

[huntabyte]

@endigo9740 Hey Chris, we can open this back up to anyone who wants to take it for now. I had some extended time over the holidays to work on it so I thought I would be able to get it done, but I am strapped for time at the moment. If no one has taken it on by the time my schedule is a bit freer I will look into it again.

[endigo9740]

All good Hunter, thanks!

[ghost]

Just realized #901 is aiming for something similar. Svelte-select exports a no-style component that can be styled via Skelton theme classes.

[endigo9740]

Appending this prototype showing how this might work:
https://svelte.dev/repl/c89476d595a04d8ea9d4cc8f081b5581?version=3.55.1

[JustBarnt]

@endigo9740 I'll take this on!

[amjadorfali]

@JustBarnt @endigo9740
For reference, you can check out MUIs version of Autocomplete component. But be mindful that it has literally a TON of features, and it took them a pretty decent amount of time to release it in their stable version

https://mui.com/material-ui/react-autocomplete/

But a small question, should this really be blocking the release of v1 for Skeleton?

[JustBarnt]

@amjadorfali

Thanks for reference link for this! I'll take a look at this later tonight!

As for release time frame. It would be nice to have from 1.0 but to be honest I also work a full-time job, so a majority of my time to work on this comes from the weekend, I get maybe an hour or two a night to work on this during the week.

I'm not sure on @endigo9740 goal, I know he mentioned it would be nice to have it ready for 1.0- But I am not sure if he is expecting it for 1.0. But either way it is being worked on and will hopefully be ready soon!

[endigo9740]

Thanks for the reference. We tend to start small and grow from there. So the initial version will most likely cover the basics, but may not be a 1:1 copy of MUI's version.

Currently this is considered "nice to have" not a "have to have" for v1.0. The documentation updates are the hard prereq for release.

[JustBarnt]

Little Preview of a good amount of progress I made this weekend. Values currently can be Record<string, unknown>[] you can also provide a whitelist currently to allow certain values to be searched.

As well as two search modes fuzzy (case-insensitive) and exclude (where as you type the matched value is removed from list while the remaining values stay)

I've also implemented the hiding/showing functionality via actions.

Definitely still some minor issues to fix and overall design to be decided upon still. But so far I am happy with it.

This is all subject to change based of what Chris and I discuss, but there is still movement and progress being made

[endigo9740]

@JustBarnt make sure to use Fixes #xx (with the correct issue number) in your PRs. This will link the original issue so that it's auto-closed with the PR is merged. I'll go ahead and close this manually now that this is complete!

[JustBarnt]

Will do!