Javascript implements ecshop search box keyboard up and down key switching control_javascript skills

In the createSelect() function, an object is returned, and the two methods of this object are next()
and moveSelect() called in prev() can correctly point to the function, you can also put
The moveSelect() function is placed outside.

Copy code The code is as follows:

/* Keyboard operation and problem recommendation options */
var curDo = null;
var select = createSelect();
$('#keywords').keyup(function(e){
var theEvent = e || window.event;
code = theEvent.keyCode ? theEvent.keyCode : (theEvent.which ? theEvent.which : theEvent.charCode)
      var KEY = {
              UP: 38,
DOWN: 40,
DEL: 46,
TAB: 9,
RETURN: 13,
             ESC: 27,
BACKSPACE: 8,
              LEFT:37,
RIGHT:39
        };
​​​​ clearTimeout(curDo);//When the keyboard pops up, the scheduled ajax data acquisition operation should be canceled
switch(code) {
case KEY.UP:
Select.next ();
                 break;
case KEY.DOWN:
                                                                                                                                                                                                                        selecting.prev();                  break;
case KEY.RETURN:
                    $('.suggest-hover').trigger('click');
                 break;
case KEY.LEFT:
                 break;
case KEY.RIGHT:
                 break;
                 default:
CurDo = setTimeout(getSuggest(),300);
                 break;
}
});
/* suggest selection operation */
Function createSelect(){
        var CLASSES = {
              ACTIVE: "suggest-hover"
        };
         function moveSelect(step) {
            var listItems=$('.suggest-results li');
//The number of steps in the current hover
          var active;
Active = $ ('.' Classses.active) .index ();
              listItems.eq(active).removeClass(CLASSES.ACTIVE);
              active = step;
                    if (active < 0) {
                      active = listItems.size() - 1;
                  } else if (active >= listItems.size()) {
                    active = 0;
            }
               var activeItem = listItems.eq(active).addClass(CLASSES.ACTIVE);
        };
         return {
              next:function(){
                  moveSelect(-1);
            },
               prev:function(){
                 moveSelect(1);
            }
        };
};

The above is all the content shared with you in this article, I hope you will like it