JSFiddle - React, Tailwind, and code Playground

HTML

<br>
  
  Press 'o' to start

<br>
  
  
<input type="search">

CSS

body { font-size: 11px; } 

.resultHeaderRow { height: 24px; }
.resultHeaderRow td { padding: 5px 0 3px 5px; }
.ac-search-gutter {
	background-color: #EEE;
	width: 26px;
	padding: 0 0 0 1px;
	margin: 0;
}
.ui-menu { padding: 0; margin: 0;}
.ui-menu-item img { float: left; }
.ui-menu-item { margin: 0; padding: 0; border: none; }
div.ac-menu-item { text-align: left; padding: 0; margin: 0; border: none; }
.ac-search-table tr:hover td { background-color: #b3ddff; }
.ac-search-table { width: 100%; }
.result-info { }
.result-img-col { padding-left: 5px; width: 35px; }
.icon-media {
	display: inline-block;
	height: 20px;
	width: 20px;
	content: "";
	margin: 0;
	vertical-align: bottom;
}
.icon-user  {
	display: inline-block;
	height: 20px;
	width: 20px;
	content: "";
	margin: 0;
	vertical-align: bottom;
}

JavaScript

$(document).ready(function() {

var availableTags = [{
  value: "Somemovie",
  rating: 23
}, {
  value: "Actionflick",
  rating: 23
}, {
  value: "Gnorf",
  points: 2,
  image: "http://www.gravatar.com/avatar/52e65a3c802ae662b6c0e0989a7c4425?s=128&d=identicon&r=PG"
}, {
  value: "Ondrew",
  points: 43,
  image: "http://www.gravatar.com/avatar/6ceaca2e4d36db284cae876622c9cfa2?s=128&d=identicon&r=PG"
}, {
  value: "Mottie",
  points: 100,
  image: "http://www.gravatar.com/avatar/9df80e51701bd6a791383150038d09e1?s=128&d=identicon&r=PG"
}];	

var globalSearch = $("input").autocomplete({
		source: availableTags,
		minLength: 1,
		delay: 0.5,
		select: function (event, ui) {
			//foooooooo
		},
		open: function (event, ui) {

			var usersHeader = '<tr class="resultHeaderRow"><td class="ac-search-gutter">'+
							  '<div class="icon-user"></td><td colspan="100%" class="result-img-col">'+
							  '<span class="faded">Usersssssssssss</span></td></tr>';

			var mediaHeader = '<tr class="resultHeaderRow"><td class="ac-search-gutter">'+
							  '<div class="icon-media"></td><td colspan="100%" class="result-img-col">'+
							  '<span class="faded">Moviesssssssss</span></td></tr>';
			
			$(".ac-search-table").find(".user-result-row:eq(0)").before(usersHeader);
			$(".ac-search-table").find(".media-result-row:eq(0)").before(mediaHeader);

		}

}).data('ui-autocomplete');
    
    
  globalSearch._renderMenu = function(ul, items) {
		var self = this;
		ul.append('<table class="ac-search-table"></table>');
			$.each( items, function( index, item ) {
			self._renderItem( ul.find("table"), item );
		});
	};

	globalSearch._renderItem = function(table, item) {

		if (typeof item.points === "undefined") {

			return $( '<tr class="media-result-row"></tr>' )
					.data( "item.autocomplete", item )
					.append('<td class="ac-search-gutter"></td>'+
							'<td class="result-img-col"><img...