css - Unable to iterate thru list in autocomplete using up and down arrow key in dojo -

need help..unable iterate thru auto suggestions using , down arrow keys on keyboard here little code snippet

dojo.require("dojo.nodelist-manipulate"); dojo.require("dojo.nodelist-traverse"); dojo.ready(function () {     var div = dojo.query("#list-of-items");     console.log(dojo.byid("search").getboundingclientrect());     dojo.connect(dojo.byid("search"), "onkeyup", function (evt) {         if (dojo.byid("search").value.trim() === "") {             dojo.foreach(div.query("li"), function (elm, i) {                 dojo.style(elm, {                     "display": "block"                 });             });             dojo.style(dojo.query("#list-of-items")[0], {                 "display": "none"             });              if(evt.keycode == 40){                 return;                            }else if(evt.keycode == 38){                 return;             }         } else {             dojo.style(dojo.query("#list-of-items")[0], {                 "display": "inline-block"             });         }         searchtable(this.value, evt);     });      function searchtable(inputval, e) {         console.log(inputval);         var list = dojo.query('#list-of-items');         dojo.foreach(list.query('li'), function (elm, i) {             var found = false;             var regexp = new regexp(inputval, 'i');             if (regexp.test(elm.innertext)) {                 found = true;                 if(i===0){                     dojo.attr(elm, { classname: "hlight" });                 }                 dojo.style(elm, {                     "display": "block"                 });                 return false;             }             if (found == true) {                 dojo.style(elm, {                     "display": "block"                 });              } else {                 dojo.style(elm, {                     "display": "none"                 });             }         });     }  }); 

and highlight auto suggest using css class

.hlight{     background:#faae00;     font-weight:bold;     color:#fff; } 

please see working fiddle here

thanks

the best thing keep index contains highlighted value, increment/decrease index every time up/down arrow pressed.

you have send index searchtable() function can add .hlight class correct elements.

the hardest part correct index when uses arrow when you're on first element (or down arrow when you're on last arrow). solved adding class .visible elements visible (in stead of adding display: block or display: none), way can query items visible.

i rewrote code bit, ending this. still, original question still left, why don't use dijit/form/combobox or dijit/form/filteringselect? dojo has widgets you, don't have reinvent wheel here (because won't good).