Autocomplete component

[JustBarnt]

Component created, route added to links.ts, route created in routes. Still need to create autocomplete.css, or some kind of styles file based on what Chris and the others think is best.

Before submitting the PR:

• Does your PR reference an issue? New Component Autocomplete
• Did you update and run tests before submission using npm run test?
• Does your branch follow our naming convention? If not, please amend the branch name using branch -m new-branch-name
• Did you update documentation related to your new feature or changes?

What does your PR address?

This is the start of the component, it is still a WIP
Initial route creation and component stubbing.

Tips

• Tap "convert to draft" to indicate this is work in progress.
• Link to an issue using the verbiage Fixes #XX
• Linked issues will auto-close when the PR is merged.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
skeleton-docs	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 25, 2023 at 1:30AM (UTC)

[endigo9740]

@JustBarnt I know you're still in progress but I mentioned I'd do a quick rudimentary scan asap. So here's a few notes.

1. This link should be in alphabetic order, so Auto Complete should come towards the end of the A's, before Avtars:

2. Should be named Autocomplete, one word, per references like Mantine
3. Remember to go ahead and revert the documentation page to something minimal for now, until we can get the DocShell updated. Otherwise this is going to be a beast to merge. We'll flush out the docs post-merge. Something like this would work for now:

<div class="page-container">
    <!-- (your examples here) -->
</div>

4. Currently filteredValues contains two binary options depending on whether a search term is present. But maybe make considerations for making this more modular so it supports a variety of filter conditions. This could include:

• No search term present (DONE)
• Search term present, do a fuzzy search against a list of options (DONE
• Some way to provide an array of values, then filter the list to only options that DON'T include this (scenario: remove suggestions for input chip values that have already been selected)
• ...(any other conditions that might make sense; we can expand this over time)...

One way to handle this might be to supply a mode: string prop that defines what type of functionality the autocomplete utilizes? if (mode === 'whatever') { ... }

5. Don't forget the tips I supplied last night about improving the fuzzy search, namely create a whitelist by plucking out select keys like labels/values, and ensure you're testing ONLY the values with Object.values({label, value})
6. Rather than building a lot of custom styles, consider leaning into Skeleton's Navigation List element styles. But still let users supply some overrides where relevant.
7. Change the list item "selector" class style from .item to .autocomplete-item to be more specific. And be sure to move those inline styles up to the script tag when you get a chance!

I'll leave it there for now, but code wise everything is looking clean - great job getting the inline prop docs and following our pattern for applying classes. Don't stress too much about the design, I'll probably have some opinions on that. But that's my area of expertise and can help.

Keep me posted when you're ready for another review. Thanks Brent!

[JustBarnt]

• - Link in alphabetical order
• - Renamed to Autocomplete
• - Reverted page documentation in favor of new DocShell when ready
• - Improve filteredValues()

• No search term present
• Search term present, do a fuzzy search against a list of options
• Some way to provide an array of values, then filter the list to only options that DON'T include this (scenario: remove suggestions for input chip values that have already been selected)
  ^ I'm referring to this as "exclude" filtering? I'm 100% open to a better name.

---

• Filtering with a whitelist included (Need to watch video on setting up tests, but I did quick test myself.)
• Use Skeletons Navigation Styles ( I believe I have achieved this) as well as pulling out styles that were originally inline.
• updated .item to .autocomplete-item

TODO

• Learn vitest
• Get .autocomplete-items to hide when input is not in focus

@endigo9740 If you get a quick chance to look at this- its much appreciated. I just want to make sure filterValues() is working more inline with what you were describing above.

Mainly the excludes filtering is what I am calling it: My interpretation is if the user has an array of values, uses the excludes filtering and they search foo, the popup below the input would update and show the user "bar and fizz" because foo is already typed in the input.

Excludes Example

Foo is not present in list, nor is FooBar (this could be considered a bug, but I think should be easily fixable if regex is used compared to includes?)

---

IF I'm correct in that functionality I need some help figuring out how to keep removing from the list as they type. I was thinking would allow or allow users to specify separators to indicate when to search for a new string?

[endigo9740]

@JustBarnt I'll try to squeeze this in once I wrap the Doc Shell updates. Thanks!