JSFiddle - React, Tailwind, and code Playground

by eapo

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<form class="wrapper" id="clear">
		<b>Hotel</b><br>
		<div class="input">
			<input type="text" id="tags">
		</div>
	</form>

CSS

*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	font-family: 'Roboto', sans-serif;
}

.wrapper{
	display: block;
	margin: 0;
}

@keyframes dedi {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.04);
	}
}

#tags{
	width: 100%;
	padding: 5px 64px 5px 5px;
	font-size: 18px;
	border: 1px solid #bebebe;
	float: left;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	border-radius: 3px;
	transition: ease .75s;
}

#tags:focus {
	border: 1px solid orange;
	box-shadow: none;
	outline-width: 0;
	animation: dedi .75s;
}

.input{
	display: inline-block;
	--border: 1px solid red;
	width: 300px;
	position: relative;
	float: left;
}

.reset{
	display: none;
}

#btn-reset{
	text-transform: uppercase;
	cursor: pointer;
	color: gray;
	position: absolute;
	right: 8px;
	top: 8px;
	float: left;
}

#btn-reset:hover{
	color: orange;

}

.ui-menu-item:hover{
	background-color: red;
}

.auto-complete{
	background-color: #ececec;
	color: black;
	font-weight: bold;
	padding: 5px;
}

.asd.City, li[aria-label^="City"] {
    display: none;
}

JavaScript

$( function() {

    $.widget( "custom.catcomplete", $.ui.autocomplete, {
			_create: function() {
				this._super();
				this.widget().menu( "option", "items", "> :not(.auto-complete)" );
			},
			_renderMenu: function( ul, items ) {
				var that = this,
					currentCategory = "";
				$.each( items, function( index, item ) {
					var li;
					if ( item.category != currentCategory ) {
						ul.append( "<li class='auto-complete asd "+item.category+"'>" + item.category + "</li>" );
						currentCategory = item.category; //buat category
					}
					li = that._renderItemData( ul, item );
					if ( item.category ) {
						li.attr( "aria-label", item.category + " : " + item.label ); //buat item
					}
				});
			}
		});
		var data = [
      { label: "London", category: "Area" },
      { label: "Muenchen", category: "Area" },
			{ label: "North London", category: "City" },
      { label: "East London", category: "City" },
      { label: "West London", category: "City" },
      { label: "South London", category: "City" },
      { label: "Lorem London", category: "Hotel Name" },
      { label: "Ipsum East London", category: "Hotel Name" },
      { label: "Hello Hotel", category: "Hotel Name" },
      { label: "Mega Hotel London", category: "Hotel Name" }
		];

		$( "#tags" ).catcomplete({
			delay: 0,
			source: data
		});

    var $input = $('#tags'); //cache
    var $reset = $('#btn-reset');

    $reset.hide();
    $reset.click(function(e) {
    	$(this).fadeOut(500);
    });


  } );