JSFiddle - React, Tailwind, and code Playground

by fbonomi

HTML

<input 
		TYPE="text" 
		CLASS="combobox-test" 

	>

CSS

/* limit size of combobox popup */
ul.ui-autocomplete 
{
	max-height: 120px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* tabular display of data */
.ui-menu-item a .cb-column 
{
	font-size:12px;
	display:inline-block;
	width:120px;
	white-space: nowrap;	
	text-overflow:ellipsis;
	overflow: hidden;
	padding-left:5px;
	NOborder:1px solid black ;
}

/* Header */
.ui-menu-item.ui-menu-item-header a .cb-column 
{
	font-weight:bold;

}

.ui-menu-item.ui-menu-item-header 
{
	border:1px solid black ;
	background:red;
}

.ui-widget-content .ui-menu-item-header .ui-state-focus
 {
	border: 1px solid #999999;
	background: red;
	font-weight: normal;
	color: #212121;
}


/* tabular display of data */
.ui-menu-item a 
{
	 width:600px;
}

JavaScript

function cComboboxOpen( event) 
{

	var s='<li class="ui-menu-item ui-menu-item-header" role="presentation"><a><div class="cb-column">Header1</div><div class="cb-column">Header2</div><div class="cb-column">Header3</div><div class="cb-column">Header4</div></a></li>';
	$("ul.ui-autocomplete[style*='block']").prepend(s);
	
}


$(function() {
$( ".combobox-test" ).autocomplete(
	{
		source: [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
],
		minLength: 0,
		delay:100,
		open: cComboboxOpen,

	})
})