JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	</head>


	<body>

		<div id="searchContainer">
			<div id="logoDiv">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 181.536" id="netapp-logo"><path fill="#0067C5" d="M0 0v147.978h69.062V59.187h39.462v88.791h69.048V0z"></path><path fill="#010101" d="M256.498.021h29.832l68.817 91.481V.021h31.898v147.937h-27.477l-71.159-93.403v93.411h-31.913L256.498.021zm146.066 92.327c0 34.43 24.973 58.139 58.786 58.139 20.335 0 35.446-7.979 45.908-21.004l-18.23-16.16c-8.81 8.199-16.571 11.562-27.265 11.562-14.3 0-24.342-7.559-27.497-22.037h78.266c.244-2.926.43-5.898.43-8.377 0-31.912-17.207-61.078-54.743-61.078-32.749 0-55.641 26.438-55.641 58.516v.439m31.247-9.455c2.507-14.453 11.121-23.932 24.379-23.932 13.401 0 21.812 9.639 23.69 23.932h-48.069zm99.045 33.149c0 26.027 13.216 33.793 32.694 33.793 10.707 0 18.512-2.518 25.225-6.51v-25.621c-4.632 2.559-9.87 4.041-15.766 4.041-7.106 0-10.268-3.596-10.268-10.943V62.743h26.456v-27.27h-26.456V6.726h-31.888v28.748H519.44v27.27h13.427l.003 53.298m225.878 65.494h31.866v-48.26c7.558 9.008 18.054 16.783 35.046 16.783 26.678 0 51.229-20.564 51.229-58.154v-.4c0-37.566-24.962-58.117-51.229-58.117-16.562 0-27.271 7.738-35.046 18.235V35.477h-31.866v146.059zm86.194-89.629c0 18.889-12.576 31.086-27.469 31.086-14.896 0-27.271-12.402-27.271-31.086v-.402c0-18.679 12.388-31.05 27.271-31.05 14.893 0 27.469 12.371 27.469 31.05v.402m44.912 89.629h31.895v-48.26c7.543 9.008 18.045 16.783 35.066 16.783 26.627 0 51.186-20.564 51.186-58.154v-.4c0-37.566-24.961-58.117-51.186-58.117-16.584 0-27.297 7.738-35.066 18.235V35.477h-31.895v146.059zm86.265-89.629c0 18.889-12.619 31.086-27.52 31.086-14.855...

CSS

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
			#suggestions{
			  -webkit-appearance: none;
			  height: 4vh;
			  width: 70%;
			  margin-left: 5px;
			  background: #fff;
			  color: #525865;
			  border-radius: 4px;
			  border: 1px solid #d1d1d1;
			  box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
			  line-height: 1.45;
			  outline: none;
			  padding: 12px 30px 14px;
			  -webkit-transition: .18s ease-out;
			  -moz-transition: .18s ease-out;
			  -o-transition: .18s ease-out;
			  transition: .18s ease-out;
			      background-position: left center;
			    background-image:...

JavaScript

$(document).ready(function() {

			    $( "#suggestions" ).autocomplete({
			      source: function( request, response ) {

					         $.getJSON("http://localhost:8080/solr/suggest/query/rows/10/suggestion_key/" + request.term + "/suggester/AnalyzeSuggester", 
					         	function (data) {
					            	response(data);
					         });
					      },
				  open: function() { 
				       $('#suggestions').autocomplete("widget").css({
			                "width": $("#suggestions").width()
			            });
				  }, 
			      minLength: 3,
			      autoFocus: true,
			      delay:100

				})
				$.ui.autocomplete.prototype._renderItem = function (ul, item) {        
				    var t = String(item.value).replace(
				            new RegExp(this.term, "gi"),
				            "<strong>$&</strong>");
				    
				    return $("<li></li>")
				        .data("item.autocomplete", item)
				        .append("<div>" + t + "</div>")
				        .appendTo(ul);
				};

				$( ".selector" ).on( "autocompletefocus", function( event, ui ) {
					
				});
			});