noMatchTemplate does not work

[Skoroglyad]

I work with tribute via ajax. It works very well if I find a user. How to return "No result" if I don't find a user? Tribute attached to ContentEditable div. Can somebody help me? What is wrong with my code? ``var tribute = new Tribute({ collection: [{ // The symbol that starts the lookup trigger: '@',

    selectTemplate: function (item) {
        if (typeof item === 'undefined') return null;
        if (this.range.isContentEditable(this.current.element)) {
            var fullName = item.original.firstname + " " + item.original.lastname;
            return '<a data-id="' + item.original.id + '" data-locale="' + item.original.locale + '" href="' + item.original.email + '">' + fullName.replace() + '</a>';
        }

        return item.original.name;
    },

    noMatchTemplate: function () {
        return '<li>Finding more...</li>';
    },

    values: function (text, cb) {
        if (text.length > 1) {
            remoteSearch(text, users => cb(users));
        }
    },

    lookup: function (person) {
        return person.firstname + " " + person.email;
    },

    selectClass: 'selected',

    fillAttr: 'name'
}]

}); function remoteSearch(text, cb) { $.ajax({ type: 'POST', url: '/comment/comment/user', data: { 'id': company_id, 'name': text, 'alias': alias, 'location_id': location_id }, success: function (data) { if (data) { var arr = JSON.parse(data); cb(arr); } }, error: function (request, status, error) { cb([]); } }); return false; } tribute.attach(document.getElementById('out_textarea')); `

[theizzer]

Hey @Skoroglyad, I had the same problem as you. I was inspecting Tribute source code and I found out that the noMatchTemplate has to be outside the "collection".

In other words: It seems that you can't have different "noMatchTemplate" function for each collection.

If you put the noMatchTemplate outside the Tribute.colletion[], it will work.

var tribute = new Tribute({
allowSpaces: true,
noMatchTemplate: function () { return 'Nothing found!'; },
collection: [{...}]
});

I found out that same goes for "allowSpaces" option.

[mrsweaters]

@theizzer This could be a great addition to a collection. I could see the use cases for having a different "No Match" template for each collection.

[apbln]

I do it this way in vueJS

 noMatchTemplate() {
          if (this.current.collection.trigger === "#")
            return "<li class = 'noMatches'>No matches found - Tag will be added</li>
          else if (this.current.collection.trigger === "@")
            return "<li class = 'noMatches'>No matches found</li>";
        }

[mrsweaters]

@apbln Would it still help to have this as separate templates per collection or does that add too much overhead?

[apbln]

It's the first thing users try (to put it into the collection). I would either have it in separate templates or just add an example (as above) to the tips.

[alex-jitbit]

Does not work for me even outside collection!

Had to explicitly set to return null

var tribute = new Tribute({
	values: function (text, cb) { /*...getting remote data...*/},
	/*...*/
	noMatchTemplate: function () { return null; }
});