JavaScript实现ECSHOP搜索框键盘上下键切换控制

JavaScript实现ECSHOP搜索框键盘上下键切换控制

在createSelect()函数内部，返回的对象包含next()和prev()两个方法。这两个方法在执行moveSelect()时，必须确保this指向正确，或者将moveSelect()函数定义在外部作用域中，以便正确访问上下文。

/* 键盘操作与问题推荐选择 */
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);//键盘弹起的时候应该取消定时ajax获取数据操作
switch(code) {
case KEY.UP:
select.next();
break;
case KEY.DOWN:
select.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选择操作 */
function createSelect(){
var CLASSES = {
ACTIVE: "suggest-hover"
        };
function moveSelect(step) {
var listItems=$('.suggest-results li');
//当前hover的步数
var active;
active = $('.'+CLASSES.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);
            }
        };
    };

以上就是本文分享给大家的全部内容了，希望大家能够喜欢