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

企鹅博客 2019年8月14日12:22:14 评论 371
摘要

这篇文章主要介绍了javascript实现ecshop搜索框键盘上下键切换控制,需要的朋友可以参考下

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

}

};

};

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

weinxin
欢迎加入中国SEO站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
企鹅博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: