JSFiddle - React, Tailwind, and code Playground

HTML

<form>
        	<div class="champ">
				<input type="text" size="30" value="" class="inputString"/> <label title="inputString"> &lt;= D&eacute;part</label>
			</div>
			<div class="suggestionsBox suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="autoSuggestionsList suggestionList"></div>
			</div>


		  <div class="champ">
				<input type="text" size="30" value="" class="inputString"/>
		  </div>
			<div class="suggestionsBox suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="autoSuggestionsList suggestionList"></div>
			</div>
		</form>

CSS

body {
		font-size: 12px;
		color: #000;
	}
	
	h3 {
		margin: 0px;
		padding: 0px;	
	}

	.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
	}
	
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}

JavaScript

jQuery(function($){
		$("input.inputString").keyup( function() { // si on presse une touche du clavier en Ă©tant dans le champ texte qui a pour id inputString
			var elem = $(this);
			var donnee = $(this).val();
			if(donnee.length == 0) {
			   // alert('vide');
                $('.suggestions').hide();
			}else{
			   // alert('plein');
                $('.suggestions').show();
                elem.parents().next('.suggestions').show();
			}
		});
        $("input.inputString").blur( function() { // si le champs texte perd le focus
			$('.suggestions').hide();
		});
        
     });