I am currently working on creating an ajax search bar using jQuery. I have encountered a roadblock where I need to navigate through dynamically created div elements within a larger div based on user input. Essentially, the divs are generated in response to JSON data and I want the ability to highlight these div elements as the user navigates using the up and down arrow keys.
<div class="comment">
<div class="single" >
//this div is dynamically created with the information
</div>
</div>
I am looking for suggestions on how to achieve this functionality efficiently. I have attempted a few approaches but they haven't been successful so far.
EDIT Here is my current implementation:
$(document).ready(function(){
$('#inputText').on('keydown',function(e){
var $current=$('.comment>.single').first();
$current.css('background-color','yellow');
if(e.keyCode==40){
var $nextDiv;
if($current.next().size==0){
$nextDiv=$('.comment>.single').first();
}
else
{
$nextDiv=$current.next();
}
$current.css('background-color','');
$nextDiv.css('background-color','yellow');
$current=$nextDiv;
}
});
});
Any help or advice would be greatly appreciated. Thank you!