JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/themes/black-tie/jquery-ui.css">
<div id="canvas">
			<section id="cont-right">
				  <div class="systemDiv">
					<nav id="main">
						<ul>
							<li id="main1">
								<ul>
									<li>
										<div class="arrowbox">
											<div class="image-menu-item">
												<input autocomplete="off" class="ui-autocomplete-input" name="query" id="suche" maxlength="180" placeholder="Suchbegriff" tabindex="-1" type="text">
											</div>
										</div>
									</li>
								</ul>
							</li>
						</ul>
					</nav>
				</div>
			</section>
		</div>

JavaScript

$(document).ready(function() {
				var  tagsAutocomplete = ["Schaufenster", "Schauspieler", "Schadenfreude"];
				$("#suche").autocomplete({
				  appendTo:"#main1 arrowbox",
				  minLength: 3,
				  source: function(request, response) {
					  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term),"i");
					  response($.grep(tagsAutocomplete,function(item){
						  return matcher.test(item);
					  }) );
				  }
				});
			});