javascript实现ecshop搜索框键盘上下键切换控制
在createSelect()函数中,返回一个对象,这个对象的两个方法next()
和prev()中的调用的moveSelect()能正确的指向到该函数,也可以把
moveSelect()函数放到外面来。
/*键盘操作与问题推荐选择*/
varcurDo=null;
varselect=createSelect();
$('#keywords').keyup(function(e){
vartheEvent= e||window.event;
code=theEvent.keyCode?theEvent.keyCode:(theEvent.which?theEvent.which:theEvent.charCode)
varKEY={
UP:38,
DOWN:40,
DEL:46,
TAB:9,
RETURN:13,
ESC:27,
BACKSPACE:8,
LEFT:37,
RIGHT:39
};
clearTimeout(curDo);//键盘弹起的时候应该取消定时ajax获取数据操作
switch(code){
caseKEY.UP:
select.next();
break;
caseKEY.DOWN:
select.prev();
break;
caseKEY.RETURN:
$('.suggest-hover').trigger('click');
break;
caseKEY.LEFT:
break;
caseKEY.RIGHT:
break;
default:
curDo=setTimeout(getSuggest(),300);
break;
}
});
/*suggest选择操作*/
functioncreateSelect(){
varCLASSES={
ACTIVE:"suggest-hover"
};
functionmoveSelect(step){
varlistItems=$('.suggest-resultsli');
//当前hover的步数
varactive;
active= $('.'+CLASSES.ACTIVE).index();
listItems.eq(active).removeClass(CLASSES.ACTIVE);
active+=step;
if(active<0){
active=listItems.size()-1;
}elseif(active>=listItems.size()){
active=0;
}
varactiveItem=listItems.eq(active).addClass(CLASSES.ACTIVE);
};
return{
next:function(){
moveSelect(-1);
},
prev:function(){
moveSelect(1);
}
};
};
以上就是本文分享给大家的全部内容了,希望大家能够喜欢