Custom autocomplete `filterFn` and custom selection handling

[ryansuhartanto]

I want to use autocomplete with input chips, but it's currently it's impossible because of missing first-class support for custom filtering such as a fuzzy finder and custom selection handling.

Please add a filterFn and maybe @input and .entries function to support these.

Example

<m3e-form-field>
  <label slot="label" for="fruit">Choose your favorite fruit</label>
  <m3e-input-chip-set aria-label="Enter people">
    <input id="people" slot="input" placeholder="New person..." />
  </m3e-input-chip-set>
</m3e-form-field>
<m3e-autocomplete
  for="people"
  .entries=${[...arrayOfPeople]}
  .filterFn=${() => {/* Handle fuzzy finder */}}
  @input=${/* Handle what happen when an option is selected */}
>
</m3e-autocomplete>

This are required for input chip that shows rich-tooltip of a person's name, email, phone, etc. and also support custom entry such as Add new + that do opens a dialog instead.

[matraic]

Regarding the ask for an input event, m3e-input-chip-set emits a change event dispatched when a chip is added or removed. This allows you to transform chips such as adding an icon or avatar to it or changing textual content. Note: there is a bug where a chip's value hasn't been set at the point this event is fired. You can work around this by awaiting a chip's updateComplete promise. This has been fixed and will be available in the next release.

For the rich-tooltip behavior, would the Material 3 input chip container transform provide the feature you're looking for?

For autocomplete, are you looking to load options dynamically from a backend search, or will you already have the full dataset available and just need programmatic filtering?

[ryansuhartanto]

Yes! I'm currently using rich-tooltip as a workaround to container transform. I am working on a feature similar to email address.

For autocomplete, I'm loading options dynamically from a backend, user may use phone number or email address to insert an entry to the input field.

The video you showed is actually more accurate to my use case with addition for inserting entry to the input.