Tagify: Help with showing multiple tagify fields in same page

[sarathsince85]

Hi I am having a hardtime in implementing multiple tagify in the same page. Following is my problem

1. I have 2+ tagify fields in same page
2. When user starts typing on the first field, ajax loading icon is showing in the second field.
3. But when results are loaded, the drop down is attached to first field.
4. When an item is selected from the drop down, the token gets added to second field, while whatever value we typed in the first field will become a token for that.

Please see the attached gif image.

https://ibb.co/bFnvtbN

This is the code I am using to initialize tagify.

    var tagifyFields = document.getElementsByClassName("input-tagify");
    var tagifyFieldsList = Array.prototype.slice.call(tagifyFields);
    if(tagifyFieldsList.length){
        tagifyFieldsList.forEach(createTagifyFields);
    }           

    function createTagifyFields(field) {
        var whitelist = [];

        var dropdown = {
            classname       : "color-blue",
            position        : "text",         
            closeOnSelect   : false,      
            highlightFirst  : true,
            duplicates      : false,
            fuzzySearch     : true,
            maxItems        : 50,
            closeOnSelect   : true  
        };

        var settings = {
            dropdown : dropdown,
            whitelist: whitelist
        };

        var maxtags = field.dataset.maxtags;
        if(maxtags){
            settings = $.extend(settings, {maxTags:maxtags});
        }

        tagify = new Tagify(field, settings);

        var sourceurl = field.dataset.sourceurl;
        if(sourceurl){
            var tagifyAjaxRequest = null;  

            tagify.on('input', function(e){
                var value = e.detail.value;
                tagify.settings.whitelist.length = 0; 
                tagify.loading(true).dropdown.hide.call(tagify)                         
                tagifyAjaxRequest = jQuery.ajax({
                    type: 'GET',
                    url: sourceurl+'&term='+encodeURIComponent(value),
                    dataType : "json",
                    beforeSend : function() {           
                        if(tagifyAjaxRequest != null) {
                            tagifyAjaxRequest.abort();
                        }
                    },
                    success: function(result) {
                        tagify.settings.whitelist = result;
                        tagify.loading(false).dropdown.show.call(tagify, value);
                    },
                    error:function(e){
                    }
                });     
            })
        }           
    }   

[yairEO]

tagify = new Tagify(field, settings);

You forgot to put var before declaring the variable

[sarathsince85]

Love you man.. Thanks a lot 🥇