Tagify: customize autocomplete selection

[raoul2000]

Hi,
I would like to use this great tag input for a personal project and I would like to know if it is possible to change the way a match is done between user entered inputs, and tags from the whitelist when enabeling the autocomplete feature.

For example if the whitelist is :

[ "orange", "blue", "green" ]

... then when the user enter "_nge_", "_orange_" is displayed in the suggestion box. Today, from what I could experiment, user has to enter "_ora_" in order to select "_orange_".

Is there a way to customize the way the selection is done ?
Thanks

By the way, thanks for this great piece of software 👍

[yairEO]

Thank you for the kind words :)

I have anticipated this need and wrote it as a comment long ago:

https://github.com/yairEO/tagify/blob/master/src/tagify.js#L1182

Do you want to make change in the source code yourself or you wish that I will make it more robust using a setting which can be passed to activate the fuzzy-search functionality?

[QuadTriangle]

https://yaireo.github.io/tagify/#section-advance-options

[raoul2000]

Hi @yairEO,
Thanks for pointing this comment in the code (I missed it). Now it seems to me I have 2 solutions to my problem :

1. enable fuzzy search by modifying the source code : I can do it myself but it would indeed be more robust to add a dedicated setting. That being said, what about allowing configuration of the matching function itself ? Something like an option called tagSelector and which would be a function to select or not a tag from the white list.

var tagSelector = (whiteListItem, value) =>  whitelistItem.value.toLowerCase().indexOf(value.toLowerCase()) == 0;
if(this.settings.tagSelector && typeof this.settings.tagSelector === 'function') {
    // we have a configured selector
    tagSelector = this.settings.tagSelector;
}

for( ; i < whitelist.length; i++ ){
    whitelistItem = whitelist[i] instanceof Object ? whitelist[i] : { value:whitelist[i] }, //normalize value as an Object

    valueIsInWhitelist = tagSelector(whitelistItem, value); 

    // match for the value within each "whitelist" item
    if( valueIsInWhitelist && this.isTagDuplicate(whitelistItem.value) == -1 && suggestionsCount-- )
        list.push(whitelistItem);
    if( suggestionsCount == 0 ) break;
}

1. implement the suggestion from @QuadTriangle : if I understand correctly, in the input event handler, the match is done and the selected tags are used to initialize the whitelist. This is some sort of dynamic whitelist

In the end I don't know what is the best solution but for sure I can now solve my problem.
Thanks to both of you for your help

ciao
😎

[yairEO]

I would pick another name than tagSelector since it isn't sufficiently self-explanatory.

Maybe dropdown.pattern or something similar.
And it should probably be a _Regex_ rather than a _function_. _Regex_ is powerful enough for any need and doesn't require creating a function & code inside it. it's much smaller configuration that achieves the same goal.

Regex can also define the minimum number of characters needed for a match, which is powerful in a way it can replace the somewhat confusing dropdown.enabled setting which can be both Boolean or a Number (minimum characters for a whitelist match)

I will contemplate on this further

[tvucak]

Thank you for the kind words :)

I have anticipated this need and wrote it as a comment long ago:

https://github.com/yairEO/tagify/blob/master/src/tagify.js#L1182

Do you want to make change in the source code yourself or you wish that I will make it more robust using a setting which can be passed to activate the fuzzy-search functionality?

It would be much appreciated if you could add a fuzzy-search functionality :)

[yairEO]

Hi, I want to get to it ASAP, but i'm so flooded with work recently I have no time for this at the moment. I hope in the next 2 weeks I will!