Can't add tags manually, if 'filter' plugin enabled

[alexgorbatchev]

Can't add tags manually, if 'filter' plugin enabled

[kdzwinel]

Thanks @alexgorbatchev for a great plugin!

The bug occurs is in isValueAllowed method in core. When it's executed, values set via tagsItems are validated by checking if they exist in list = self.opts('filterItems') || self._suggestions || [] array. Unfortunately, this array is empty and all tags are recognized as invalid, that's why they won't render.

Simple workaround: Just set filterItems option to the same value as suggestions like this:

$('#trades_textarea').textext({
    plugins: 'autocomplete suggestions tags filter',
    tagsItems: selectedTags,
    filterItems: allTags,
    suggestions: allTags
})

[alexgorbatchev]

@evereq This looks like a bug. Have you looked at the code? Any idea what's happening?

[evereq]

@alexgorbatchev ah, no sorry - too busy with other things :)

[ncreuschling]

I observe this behavior as well. I can't initialize a textarea with tagsItems together with the filter plugin.

[Amitesh]

It occurred for me as well.
Here is sample code gist https://gist.github.com/2669286

I have removed "filter" plugin from it and It works.

@alexgorbatchev Great Work!

[katio]

I have the same problem. When you have filter and tags plugins, tagsItems and .addTags() don't work. I also tried using filter.enabled=false and then .addTags() without success.

@alexgorbatchev This js is cool. Thank you.

[cmeresse]

Hello,

This works if you are using the suggestions plugin but if you are using ajax, you can not use this workaround. You have to call the ajax request "manually" to initialize the filterItems. And then I don't know what occurs if you add a new value into your backoffice? Will filterItems take it into account?

[stourpower]

I got around it by not using the built-in AJAX call function and instead, called the AJAX info into the page at the start on page load and then wrote it into the suggestions option - not the most sophisticated solution but it was good enough for what I needed...

$.get('url_of_Ajax', function(data){
    $('#id_selector').textext({
    plugins: 'autocomplete filter tags suggestions',
    suggestions: data
    });
});

[eek]

Had the same problem, my solution was to edit the source code and change from

p.addTags = function(tags)
{
    if(!tags || tags.length == 0)
        return;

    var self      = this,
        core      = self.core(),
        container = self.containerElement(),
        i, tag
        ;

    for(i = 0; i < tags.length; i++)
    {
        tag = tags[i];

        if(tag && self.isTagAllowed(tag))
            container.append(self.renderTag(tag));
    }

    self.updateFormCache();
    core.getFormData();
    core.invalidateBounds();
};

to

p.addTags = function(tags)
{
    if(!tags || tags.length == 0)
        return;

    var self      = this,
        core      = self.core(),
        container = self.containerElement(),
        i, tag
        ;

    for(i = 0; i < tags.length; i++)
    {
        tag = tags[i];

        if(tag)
            container.append(self.renderTag(tag));
    }

    self.updateFormCache();
    core.getFormData();
    core.invalidateBounds();
};

Allowance in addTags I think it's not so usefull. Works like a charm :)

[alariva]

kdzwinel, the workaround seems clean. Have you got any idea on how to load the item list with AJAX ?

[kdzwinel]

@alariva Sorry, I haven't worked with this plugin since my last comment - I don't remember the details.

[fernao]

raduamarie, thanks!

but this code needed to be commited to the code.

@eek can you please raise pull request, I think after that author can merge that into core, BTW nice work thanks your code works :)

[eek]

Done @fernao & @DhavalTailored but I don't think this plugin is maintained any more, we should ask for commit privileges or continue with a fork.

And maybe some design improvements (like Facebook has) and a React version which I can do and also a Vanilla JS one (jQuery is in decline from my point of view).