JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search-box">

CSS

.resultBox{ float: left; width: 30%!important;}

JavaScript

$.widget( "custom.twocolumnsautocomplete", $.ui.autocomplete, {
		_renderMenu: function( ul, items ) {
			var that = this,
			currentCategory = "";
			ul.addClass('searchAutocomplete');
			// insert columns for the 2 categories: artists and songs
			ul.append('<div class="cat1 resultBox"><li>Category1</li></div>');
      ul.append('<div class="cat2 resultBox"><li>Category2</li></div>');
			$.each( items, function( index, item ) {
				// render li items for each category
				that._renderItem( ul.find('.'+ item.category ), item );
			});
		}
	});

var data = [
  {label: 'AAA', value: 'aaa', category: 'cat1'},
  {label: 'ABB', value: 'abb', category: 'cat2'}
];

$('#search-box').twocolumnsautocomplete({
  source: data
});