JSFiddle - React, Tailwind, and code Playground

by Tung Nguyen

HTML

<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>
<link rel="stylesheet" href="http://aehlke.github.io/tag-it/css/jquery.tagit.css">
<input id="tags" type="text" />

CSS

.ui-autocomplete-group {
    line-height: 30px;
    background-color: #aaa;
}
.ui-menu-item {
    padding-left: 10px;
}

JavaScript

$(function(){
    
    var availableTags = [
        {category: "favourite", label: "c#",         value: "c#", },
        {category: "favourite", label: "JavaScript", value: "JavaScript"},
        {category: "other",     label: "c++",        value: "c++"},
        {category: "other",     label: "c",          value: "c"},
        {category: "other",     label: "Java",       value: "Java"},
        {category: "other",     label: "J#",         value: "J#"},
    ];
        
    var customRenderMenu = function(ul, items){
        var self = this;
        var category = null;
        
        $.each(items, function (index, item) {
            if (item.category != category) {
                category = item.category;
                ul.append("<li class='ui-autocomplete-group'>" + category + "</li>");
            }
            self._renderItemData(ul, item);
        });        
    };
        
    $("#tags").tagit({
        autocomplete: {
            source: availableTags,
            create: function () {
                //access to jQuery Autocomplete widget differs depending 
                //on jQuery UI version - you can also try .data('autocomplete')
                $(this).data('uiAutocomplete')._renderMenu = customRenderMenu;
            }
        }
    })
});