yairEO / tagify

đź”– lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.56k stars 436 forks source link

Custom filtering & sorting of suggestions #1404

Closed lofcz closed 2 days ago

lofcz commented 3 weeks ago

Sometimes, the built-int (fuzzy) search is not flexible enough. This PR proposes a new setting dropdown.customSearch enabling end-users to customize the sorting and filtering of suggestions however they need. The implementation is straightforward and does not introduce any breaking changes.

yairEO commented 2 days ago

Use the dropdown.sortby setting:

If set as startsWith string, the suggestions list will be sorted with matched items which starts with the query shown first, and exact matches shown before all.

If this setting is defined as a function, it receives two arguments: the array of filtered items and the query and it must return an Array.(default sorting order is same as the whitelist's)

lofcz commented 2 days ago

sortBy filters the items before it passes the array of options to the function provided. In my case, I need to show suggestions that would be filtered out.

yairEO commented 2 days ago

I don't understand...

lofcz commented 2 days ago

I have a small set of options dynamically inferred by an LLM, based on what the user is typing. Those suggestions might not pass the filtering function hidden in Tagify, so sortBy can't be used. It's the first thing I've tried. This can be thought of as "loose suggestions". To make this fully work, I also needed to hack how pressing the "Enter" key works (to prevent inserting a suggestion aggressively). I can open another PR for that.

An example of a "loose suggestion": input: kyng suggestion: kingdom

This would be filtered out because the underlying mechanism is a variation of includes(). While the example above can be thought of as fuzzy matching, I'm hesitant to call it that, it's more of a "brainstorming with an LLM".

yairEO commented 2 days ago

Your use-case is so specific that you might as well just override the filterListItems method of tagify.

See related issue: https://github.com/yairEO/tagify/issues/1114

lofcz commented 2 days ago

I suppose that could work - apart from that there's still the issue with how those loose suggestions behave. Pressing Enter accepts the first suggestion aggressively - the user's intent might have not been to accept it. Is this part something you would be open to addressing somehow (possibly with some configuration option)? I have a hacky solution but since I'm not very familiar with the codebase it's a hack, an official solution would be better.

My idea was to mimic how searching in browsers works, placing the current input as the first option dynamically, so it's always preselected.

yairEO commented 2 days ago

Pressing Enter accepts the first suggestion aggressively - the user's intent might have not been to accept it

Why would the user press the Enter key if not to add whatever was typed as a tag? Unless you are referring to mix-mode where text & tags are mixed and enter may be pressed to add a new line, but still.. not while type a tag

You can also set dropdown.highlightFirst setting to false