Custom render tag-it plugin

Question

I am creating a custom render for my tag-it suggestion. I am currenctly able to override the return item with this code :

$projectTags.tagit({
            autocomplete: ({
                delay: 0,
                minLength: 2,
                source: test,
                select: function (event, ui) {
                    that.createTag(ui.item.value);
                    // Preventing the tag input to be updated with the chosen value.
                    return false;
                }

            })
        });

        $projectTags.find("input").data("uiAutocomplete")._renderItem = function (ul, item) {
            var newItem = $("<li class='project-tagit-li'>");
            var color = $.string_to_color(item.OwnerName);
            var initials = item.OwnerName.split(" ")[0][0] + item.OwnerName.split(" ")[1][0];
            newItem.attr("data-value", item.OwnerId);

            var html = '<p class="initials initials-project-tagit" title="' + item.OwnerName + '" style="background-color:' + color + '" >' + initials + '</p><div><p class="projectName">' + item.Name + '</p><p class="companyName">' + item.CompanyName + '</p></div>';

            newItem.append(html)
            return newItem.appendTo(ul);
        };

The problem is, that all the event binded by tag-it are not available for my own item. Someone have an idea to bind them again?

Answer 1

I Found the solution :

The li need to have a <a> and the item.label & value should be not empty if you have custom object