javascript - how to navigate dynamically generated div's using arrow up and down keys -


i created live search using omdb api. each suggestion displayed in dynamically generated div. how navigate div's using , down arrow keys.

click here ! fiddle

here have used onclick function dynamic div's works how use onkeyup ? doesn't seem work

for (var = 0; < obj.search.length; i++)          {              var divtag = document.createelement("div");             divtag.id = "div"+i;             divtag.classname = "list";              divtag.onclick=(function() {               var data = obj;               var num = i;               var id=obj.search[i].imdbid;               return function()                {                   boo(data, num,id);                }               })(); 

its how google live search works suggestions , can use arrow keys come down

click here ! fiddle

you can try global variable , click event

var nlastdiv = -1; 

and

case 38:         --nlastdiv         if(nlastdiv<0){            nlastdiv++         }         document.getelementbyid("div"+nlastdiv).click();          break;     case 39:          break;     case 40:             ++nlastdiv         if(nlastdiv>9){           nlastdiv--;         }         document.getelementbyid("div"+nlastdiv).click();         break;     default: 

and

function clear(){     nlastdiv = -1;     document.getelementbyid("title").innerhtml=""; 

Comments