This is a simple autocomplete search bar that shows suggestions when a user gives input. One can navigate within all the suggestions using down or up arrow keys. But this suggestion box has only 300px of max height. So I had to make it scrollable with the y axis. I want that when a user navigates through suggestions, the div should be scrolled, so the user can navigate through all the suggestions. JS Fiddle
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Autocomplete</h2>
<p>Start typing:</p>
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
</body>
</html>
