JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<label for="search">Search:</label>
<input id="search">

JavaScript

var data = [
      { label: "anders", category: "Products" },
      { label: "andreas", category: "Products" },
      { label: "antal", category: "Products" },
      { label: "annhhx10", category: "Products" },
      { label: "annk K12", category: "Products" },
      { label: "annttop C13", category: "Products" },
      { label: "anders andersson", category: "People" },
      { label: "andreas andersson", category: "People" },
      { label: "andreas johnson", category: "People" }
    ];
 
    $( "#search" ).autocomplete({
      delay: 0,
      autoFocus: true,
      source: data
    })
    	.val(data[0].label)
        .data('uiAutocomplete')._renderMenu = function(ul, items) {
    	var currentCategory = "";
		$.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
            	ul.append( "<li class='ui-category ui-autocomplete-category' style='background-color: grey'>" + item.category + "</li>" );
                currentCategory =  item.category;
            }
            
            $('<li aria-label="'+item.label+'"><a>' + item.label +'</a>').data('ui-autocomplete-item', item).appendTo(ul);
        });
    };