javascript实现ecshop搜索框键盘上下键切换控制_javascript技巧

js教程评论1.2K views阅读模式

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

}

};

};

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

企鹅博客
  • 本文由 发表于 2019年8月14日 12:22:14
  • 转载请务必保留本文链接:https://www.qieseo.com/414581.html

发表评论