Autocomplete - custom filtering

[lsman333]

It would be nice to be able to choose the type of filtering / autosuggest that is used. Currently the autocomplete suggest words/numbers not on a "first-character" basis, but searches the entire string for a matching sequence. It would be good to be able to change it to a "first-character" match implementation.

From the Anvil forums:

I had been using Autocomplete in my app when searching for apartment numbers in a building, however I noticed the feature shows the autocomplete suggestions in an unusual way. Instead of matching by the first letter or digit first, it searches each entry in the list and shows suggestions even if the sequence of letters or digits is in the middle of matching string.

ie, I start typing: “cat”
the autosuggest would show: “scathing” and “cats” and “meercats” (provided those are part of the list to check against)

or, more pertinent to my use case, if I start typing “231”
the autosuggest would show “11231”, “2313”, “231”, “9932315” just because that string is contained in one of the other possibilities.

I personally find this unusual, and I don’t think most users would be accustomed to such an implementation. Indeed, I think a previous iteration of this module/feature used the standard “first character must match” method of autosuggestion.
I looked at the code, but it did not seem trivial to make the switch from one way to the other, nor did I see a property or boolean flag to set to change the way the matches are displayed.

[s-cork]

The autocompletion filtering hasn't changed since the component was made.

I guess there are a couple of ways we could adjust this.

A filter mode, which for now could just be strings. And two options: "contains" or "startswith".

A problem with startswith is that it won't work very well for suggestions with multiple words. eg "Great Britain" - "bri" wouldn't show this result. So we'd then need to decide if we did startswith on all the words within the suggestion. And then do we split on only spaces? Or spaces and hyphens.

Another way would be to support a custom filter function. But that gets a bit complicated because the autocompletion component needs to know what to highlight after it's filtered the suggestions.

[lsman333]

Just using Google as an example, it does not filter on multiple words when the search term is contained in some later part of the search term, neither with letters or numbers. If I search "Great", I see "Great Britain" as a suggestion, likely because it is filtering additionally based on frequency of the searches that include that additional term. But searching "bri" or "britain" doesn't autopopulate my search fields with "Great Britain", only "britain".
If I search "15" I get words or numbers that all start with that number, and not strings with "15" contained somewhere inside them, like "August 15 2023"

I think adding additional words at the beginning of the suggestions, even if they are contained in the search term, creates some confusion. I don't think it is necessary to implement "startswith" on anything other than the first word in a multi-word string.

[s-cork]

Just to justify the current implementation

Here are a couple of component libraries that implement similar filtering

https://mui.com/material-ui/react-autocomplete/#combo-box

https://zagjs.com/components/react/combobox

Adding startswith mode which isn't too clever should be simple to implement.