JSFiddle - React, Tailwind, and code Playground

by davorpeic

HTML

<div class="ui-widget">
Just enter anything here: <input id="search"/>
</div>

CSS

.ui-autocomplete {
    width: 350px;
}
.ui-autocomplete li.interim {
    width: 50%;
    float: left;
}

JavaScript

// Some dummy data that is always used as result:
var data = [
    { isCaption: true, value: "Articles", layout: "<b>Articles</b>"},
    { isCaption: false, value: "Article 1", layout: '<a href="#">Article 1</a>'},
    { isCaption: false, value: "Article 2", layout: '<a href="#">Article 2</a>'},
    { isCaption: false, value: "Article 3", layout: '<a href="#">Article 3</a>'},
    { isCaption: true, value: "Categories", layout: "<b>Categories</b>"},
    { isCaption: false, value: "Category 1", layout: '<a href="#">Category 1</a>'},
    { isCaption: false, value: "Category 2", layout: '<a href="#">Category 2</a>'},
    { isCaption: false, value: "Category 3", layout: '<a href="#">Category 3</a>'},
];

$(function() {
	var autocomp = $('#search').autocomplete({
        // Just return the above array as dummy result
        source: function(request, response) { response(data); },
		minLength: 2,
		select: function( event, ui ) {

		}
	}).data("ui-autocomplete");
    
	autocomp._renderItem = function( ul, item) {
		return $('<li class="ui-menu-item"/>')
			.append(item.layout)
			.appendTo(ul);
	}
	
	autocomp._renderMenu = function( ul, items ) {
		var that = this;
		var curUl = $('<ul/>');
        var curEmpty = true;
		for (var i = 0; i < items.length; ++i) {
			if (items[i].isCaption && !curEmpty) {
                // Insert caption, and append items
				$('<li/>').addClass('interim').append(curUl).appendTo(ul);
				curUl = $('<ul/>')
                curEmpty = true;
			} else {
				curEmpty = false;
			}
			that._renderItemData(curUl, items[i]);
		}
        // add remaining items
		$('<li/>').addClass('interim').append(curUl).appendTo(ul);
	}
	
	autocomp._resizeMenu = function() {
        // Final fixup:
		var e = this.menu.element;
        // Inner ULs are hidden
        e.find('ul').css('display', 'inline-block');
        // Inner ULs are not top-level menus
		e.find('ul').removeClass();
        // Top-level LIs are no menu items
       ...