手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript实现ecshop搜索框键盘上下键切换控制
javascript实现ecshop搜索框键盘上下键切换控制
摘要:在createSelect()函数中,返回一个对象,这个对象的两个方法next()和prev()中的调用的moveSelect()能正确的指...

在createSelect()函数中,返回一个对象,这个对象的两个方法next()

和prev()中的调用的moveSelect()能正确的指向到该函数,也可以把

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);

}

};

};

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

【javascript实现ecshop搜索框键盘上下键切换控制】相关文章:

javascript实现youku的视频代码自适应宽度

javascript实现查找数组中最大值方法汇总

javascript实现日期按月份加减

javascript基于DOM实现省市级联下拉框的方法

用JavaScript实现对话框的教程

纯javascript实现四方向文本无缝滚动效果

JavaScript实现表格点击排序的方法

javascript实现淡蓝色的鼠标拖动选择框实例

javascript实现仿腾讯游戏选择

javascript生成不重复的随机数

精品推荐
分类导航