JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" class="country"/>
<input type="text" class="city"/>

JavaScript

var countries=function(){
		var res=[],
			list={
				"1": "Ukraine",
				"2": "Germany",
				"3": "France",
				"4": "Spain",
				"5": "Sweden",
				"6": "USA",
				"7": "Canada",
				"8": "Moldova",
				"9": "Belarus",
				"10": "Poland"
			};
		
		for(var id in list){
			if(list.hasOwnProperty(id))
				res.push({
					id:id,
					label:list[id]
				});
		};
		
		return res;
	}.call(),
	cities=function(){
		var res={},
			list={
				"1": {"country": 1, "name": "Ukraine"},
				"2": {"country": 3, "name": "Paris"},
				"3": {"country": 4, "name": "Madrid"},
				"4": {"country": 6, "name": "Houston"},
				"5": {"country": 7, "name": "Montreal"},
				"6": {"country": 8, "name": "Кишинев"},
				"7": {"country": 9, "name": "Minsk"},
				"8": {"country": 10, "name": "Warsaw"},
				"100": {"country": 1, "name": "Львов"},
				"101": {"country": 1, "name": "Николаев"},
				"103": {"country": 1, "name": "Переяслав-Хмельницкий"},
				"104": {"country": 1, "name": "Каменец-Подольский"},
				"105": {"country": 1, "name": "Donetsk"},
				"106": {"country": 1, "name": "Kharkov"},
				"107": {"country": 1, "name": "Луцк"},
				"108": {"country": 1, "name": "Poltava"},
				"109": {"country": 1, "name": "Черновцы"},
				"299": {"country": 1, "name": "Чернигов"},
				"333": {"country": 1, "name": "Чернигов"}
			};
		
		for(var id in list){
			if(list.hasOwnProperty(id))
				(res[list[id].country]=res[list[id].country]||[]).push({
					id:id,
					label:list[id].name
				});
		};
		
		return res;
	}.call(this)
	
$('.country').autocomplete({
	source:countries,
	change:function(event,ui){
		if(!ui.item || !ui.item.id)
			return;
			
		$('.city').autocomplete('option','source',cities[ui.item.id]||[]);
	}
});
$('.city').autocomplete({source:[]});