JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://yandex.st/jquery/1.12.4/jquery.min.js"></script>
	<div id="block-search">
		<form method="post">
		 
			<input name="q" id="input-search" type="text" placeholder="Поиск города" autocomplete="off">
			<input id="form-search" value="GO!" type="submit">
		 
		</form>
			<button id="form-clear">Clear</button>
		<div id="block-search-result">
		 
			<ul id="list-search-result"></ul>
		 
		</div>
	</div>

CSS

#block-search{
		    height: 33px;
		}
		// Поле поиска
		#input-search{
		    height: 29px;
		    width: 500px;
		    border: 1px solid #D8D8D8;
		    padding-left: 5px;
		    padding-right: 5px;
		}
		// Кнопка
		#form-search, #form-clear{
		    width: 54px;
		    height: 33px;
		    border: none;
		    cursor: pointer;
		    position: absolute;
		    margin-left: -5px;
		     
		}

		/* Результат поиска */
		#block-search-result{
		    border-left: 1px solid #E1DFDD;
		    border-right: 1px solid #E1DFDD;
		    border-bottom: 1px solid #E1DFDD;
		    width: 419px;
		    height:  auto;
		    background-color: white;
		    position: absolute;
		    z-index: 9999;
		    display: none;
		}
		#list-search-result > li{ 
		    border-bottom: 1px solid #EAEAEA;
		    height: auto;
			list-style: outside none none;
			padding: 10px 0;
		}

JavaScript

$(function(){
		var rescont;

		$('#input-search').bind("change keyup input click keydown paste", function() {
			if(this.value.length >= 2){
				$.ajax({
					type: 'get',
					url: "https://geocode-maps.yandex.ru/1.x/", //Путь к обработчику
					data: 'format=json&geocode='+ this.value+'&key=',
					dataType: 'json',
					error: function(xhr) {
						rescont+='Ошибка геокодирования: '+xhr.status+' '+xhr.statusText;
					},
					success: function(data){
						//console.log(data);
						var geores = data.response.GeoObjectCollection.featureMember;
						if(geores.length>0) { 
							for(k=0;k<geores.length;k++) {
								rescont+='<li>'+geores[k].GeoObject.name+', '+geores[k].GeoObject.description+': '+geores[k].GeoObject.Point.pos+'</li>';
							}

							$("#block-search-result").show(); // Показываем блок с результатом.
							$("#list-search-result").html(rescont); // Добавляем в список результат поиска.
							rescont = '';
						} else {
							$("#block-search-result").text('Not found'); 
						}
					}

				})
			}
		})

	    
		//При выборе результата поиска, прячем список и заносим выбранный результат в input
		$("#list-search-result").on("click", "li", function(){
			selected = $(this).text();
			$("#input-search").val(selected);
			$("#block-search-result").fadeOut();
		})

		$("#form-clear").click(function(){
			$("#input-search").val('');
		})
	
	})