Looking for some assistance? Check out this codepen.
I'm currently working on a search bar widget that allows navigation from the input field to the search results, displayed as a series of divs. The navigation is controlled via jquery, where the focus shifts between div elements triggered by arrow key inputs.
The divs are contained within a parent div.s_dropdwn with specified styling attributes like max-height:100px and overflow-y:scroll.
While the navigation functionality works smoothly, there is an issue with scrolling behavior. Upon pressing the down arrow key starting at the input, the focused div disappears due to scrolling movement.
My aim is to achieve seamless navigation where you can move down to the fifth div before triggering any scrolling actions.
$('.move').keydown(function(e){
if (e.keyCode == 40) {
$(".move:focus").attr('tabindex','-1')
$(".move:focus").next().attr('tabindex','0').focus();
}
if (e.keyCode == 38) {
$(".move:focus").attr('tabindex','-1')
$(".move:focus").prev().attr('tabindex','0').focus();
}
});
$('.s_dropdwn > .move.first').keydown(function(e){
if (e.keyCode == 38) {
$(".move.first:focus").attr('tabindex','-1')
$("input").focus()
}
});
$("input").keydown(function(e){
if(e.keyCode === 40){
$('.s_dropdwn > :first-child').attr('tabindex','0').focus();
}
});
*{
margin:0px;
padding:0px;
}
div.s_container{
width:40%;
position:relative;
margin:auto;/* horizontally center the div*/
margin-top:10%; /*margin in percent based on width of container .parent1*/
background-color:#becee8;
line-height:62px;
}
.con_inpt{
position:relative;
display:inline-block;
vertical-align:middle;
line-height:normal;
border:white solid 1px;
margin-left:5px;
margin-bottom:3px;
width: 200px;
}
.s_dropdwn{
position:absolute;
top:100%;
max-height:150px;
width:100%;
background-color:#becee8;
margin-top:2px;
overflow-y:scroll;
}
.s_dropdwn > div:focus{
outline:none;
background-color:black;
}
.s_dropdwn > div{
display:block;
width:100%;
height:30px;
line-height:30px;
border-top: solid 1px white;
font-size:0.5rem;
font-family: Arial,sans-serif;
font-weight:600;
color:white;
box-sizing: border-box;
padding-left: 10px; /*because of box-sizing padding will be inside the div not outside*/
cursor:pointer;
transition: background-color 0.4s;
}
input#search{
display:inline-block;
border:none;
background:none;
outline:none;
width:80%;
padding:7px 3px;
font-size:0.8rem;
font-weight:600;
color:white;
}
input#search::placeholder{
font-size:0.8rem;
font-weight:600;
color:white
}<!DOCTYPE html>
<!-- saved from url=(0048)file:///C:/Users/jvalica/Downloads/d3%20(2).html -->
<html lang="en">
<head>
<meta charset="utf-8>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="parent1" style="position:relative; width:80%;margin:auto; height:300px;border: 1px solid #e4f2f5; background-color: #e4f2f5;">
<div class="s_container">
<div class="con_inpt">
<input id="search" type="text" class="" name="" placeholder="Search" autocomplete="off">
<div class="s_dropdwn">
<div class="move first">
AAA
</div>
<div class="move">
BBB
</div>
<div class="move">
CCC
</div>
<div class="move">
DDD
</div>
<div class="move">
EEE
</div>
<div class="move">
FFF
</div>
<div class="move">
GGG
</div>
<div class="move">
HHH
</div>
</div>
</div>
</div>
</div>
</body>
</html>