JSFiddle - React, Tailwind, and code Playground

by webspicer

HTML

<input type="text" maxlength="100" id="checkValue" />

JavaScript

$.widget( "custom.catcomplete", $.ui.autocomplete, 
{
		_renderMenu: function( ul, items ) 
	{
		var that = this,
		currentCategory = "";
		$.each( items, function( index, item ) 
	{

	if ( item.category != currentCategory ) 
	{
	    
		ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
		currentCategory = item.category;
	}
		that._renderItemData( ul, item );
		 
	});
	}


});


$.ui.autocomplete.prototype._renderItem = function( ul, item) {
              var re = new RegExp(this.term, "i") ;
              var t = item.label.replace(re,"<span style='font-weight:bold;color:#3366cc;'>" + this.term + "</span>");
              return $( "<li></li>" )
                  .data( "item.autocomplete", item )
                  .append( "<a>" + t + "</a>" )
                  .appendTo( ul );
          };

$(function() 
{
	
var data = 
[
	{ label: "local - 1", category: "local" },
	{ label: "local - 2", category: "local" },
	{ label: "local - 3", category: "local" },
	{ label: "local - 4", category: "local" },
	{ label: "local - 5", category: "local" },
	{ label: "international - 1", category: "international" },
	{ label: "international - 2", category: "international" },
	{ label: "international - 3", category: "international" },
	{ label: "international - 4", category: "international" },
	{ label: "international - 5", category: "international" },
];
	
	$( "#checkValue" ).catcomplete
			(
			{ 
				source: data, minLength: 0,
		
					open: function(event, ui) 
					{ 
						 $(".ui-autocomplete").mCustomScrollbar
						({
							scrollButtons:
							{  
								enable:true,
								scrollInertia:600,
								autoDraggerLength:false
							}
						});
					
						$( ".ui-autocomplete" ).autocomplete( "enable" );
					} 
				
			}
			
			)	
						 
    

});