How to use autocomplete() in jquery

I have a problem with jquery and autocomplete. When I start typing a city in a search filter I get the city I want but then the message pops on top saying: 1 result is available, use up and down arrow keys to navigate. It really messes up the whole page and I would like to get rid of it. Here's the screenshot:

body{
	font-family: 'Roboto', sans-serif;
	padding: 0;
	margin: 0;
} 

#container nav ul{
	color: navy;
	position: absolute;
	left: 50%;
	top: 5%;
	transform: translate(-50%, -5%);
	list-style-type: none;
	font-size: 15px;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	font-weight: bold;
}

#container nav li{
	display: inline-block;
	width: 31%;
	padding: 1%;
}

#main{
	color: midnightblue;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -40%);
}

#main h3{
	line-height: 1.5em;
}

img{
	width: 100vw;
	height: 100vh;
}

form{
	text-align: center;
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translate(-50%, -20%);
	font-size: 40px;
}

form label{
	margin-bottom: 7px;
}

form input[type="text"]{
	padding: 10px;
	border: none;
	display: block;
	width: 600px;
	border-bottom: 2px solid black;
	text-align: center;
}

input:focus{
	outline: none;
}

button{
	color: white;
	font-weight: bold;
	display: block;
	position: absolute;
	left: 50%;
	top: 65%;
	transform: translate(-50%, -65%);
	width: 250px;
	padding: 12px;
	border: none;
	background: linear-gradient(70deg, rgba(175,238,238,0.6) 50%, rgba(135,206,250, 0.6) 50%);
	letter-spacing: 0.15em;
} 

button:hover{
	animation: change 0.2s linear forwards;
}

@keyframes change{
	from{color: white; font-size: 20px; background: linear-gradient(40deg, rgba(175,238,238,0.1) 50%, rgba(135,206,250, 0.1) 50%);}
	to{color: royalblue; font-size: 25px; background: linear-gradient(40deg, rgba(175,238,238,0) 50%, rgba(135,206,250, 0) 50%);}
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="vezovi.css" type="text/css" rel="stylesheet">
	<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icons/favicon-32x32.png">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
	integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
	<script>
		$(document).ready(function(){
	
			$('button').click(function(){
				$('#container, img').fadeOut(500),
				$('form').delay(1000).fadeIn(500);
			}); 

			let gradovi = ['Rovinj', 'Medulin'];

			$('#lokacija').autocomplete({
				source: gradovi
			});

			$('gradovi').css('color', 'red');
		});
	</script>
</head>
<body>
	<img src="https://komarna-croatia.com/wp-content/uploads/2016/04/Sea-Wallpaper-Travel.jpg">
	<div id="container">
		<nav>
			<ul>
				<li>a</li>
				<li>b</li>
				<li>c/li>
			</ul>
		</nav>
		<div id="main">
			<h1>Cities</h1>
			<h3>Click on the button</h3>
		</div>
		<button style="font-size: 20px; border-radius: 25px;">Klikni ovdje</button>
	</div>
	<form style="display: none;" method="POST" target="_self" action="lokacija.html">
		<label for="lokacija">Enter location</label>
		<input type="text" id="lokacija" value="" name="location">
	</form>
	<!-- <script src="vezovi.js"></script> -->
</body>
</html>

Also, is it possible to style autocomplete options?

Solution

you didn't add Jquery UI styling css file , you can got to https://jqueryui.com/themeroller/ to customize you style , see code bellow i added

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

body {
  font-family: 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
}

.ui-autocomplete li {
  border: 1px solid #003eff;
  background: black;
  color: red;
  font-weight: normal;
}

#container nav ul {
  color: navy;
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, -5%);
  list-style-type: none;
  font-size: 15px;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
  font-weight: bold;
}

#container nav li {
  display: inline-block;
  width: 31%;
  padding: 1%;
}

#main {
  color: midnightblue;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -40%);
}

#main h3 {
  line-height: 1.5em;
}

img {
  width: 100vw;
  height: 100vh;
}

form {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -20%);
  font-size: 40px;
}

form label {
  margin-bottom: 7px;
}

form input[type="text"] {
  padding: 10px;
  border: none;
  display: block;
  width: 600px;
  border-bottom: 2px solid black;
  text-align: center;
}

input:focus {
  outline: none;
}

button {
  color: white;
  font-weight: bold;
  display: block;
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -65%);
  width: 250px;
  padding: 12px;
  border: none;
  background: linear-gradient(70deg, rgba(175, 238, 238, 0.6) 50%, rgba(135, 206, 250, 0.6) 50%);
  letter-spacing: 0.15em;
}

button:hover {
  animation: change 0.2s linear forwards;
}

@keyframes change {
  from {
    color: white;
    font-size: 20px;
    background: linear-gradient(40deg, rgba(175, 238, 238, 0.1) 50%, rgba(135, 206, 250, 0.1) 50%);
  }
  to {
    color: royalblue;
    font-size: 25px;
    background: linear-gradient(40deg, rgba(175, 238, 238, 0) 50%, rgba(135, 206, 250, 0) 50%);
  }
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="vezovi.css" type="text/css" rel="stylesheet">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/img/icons/favicon-32x32.png">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {

      $('button').click(function() {
        $('#container, img').fadeOut(500),
          $('form').delay(1000).fadeIn(500);
      });

      let gradovi = ['Rovinj', 'Mooo', 'Meeeaw🐱', 'mowmow🐈'];

      $('#lokacija').autocomplete({
        source: gradovi
      });

      $('gradovi').css('color', 'red');
    });
  </script>
</head>

<body>
  <img src="https://komarna-croatia.com/wp-content/uploads/2016/04/Sea-Wallpaper-Travel.jpg">
  <div id="container">
    <nav>
      <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </nav>
    <div id="main">
      <h1>Cities</h1>
      <h3>Click on the button</h3>
    </div>
    <button style="font-size: 20px; border-radius: 25px;">Klikni ovdje</button>
  </div>
  <form style="display: none;" method="POST" target="_self" action="lokacija.html">
    <label for="lokacija">Enter location</label>
    <input type="text" id="lokacija" value="" name="location">
  </form>
  <!-- <script src="vezovi.js"></script> -->
</body>

</html>