javascript实现ecshop搜索框键盘上下键切换控制
更新时间:2015年03月18日 14:55:58 投稿:hebedich
这篇文章主要介绍了javascript实现ecshop搜索框键盘上下键切换控制,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
在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);
}
};
};
以上就是本文分享给大家的全部内容了,希望大家能够喜欢
相关文章
ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla
使特定于 Internet Explorer 的 Web 应用程序在 Mozilla 上运行时,您遇到过麻烦吗?本文讨论了将应用程序迁移到基于开源 Mozilla 浏览器上时的常见问题。首先讨论跨浏览器开发的基本技术,然后介绍克服 Mozilla 和 Internet Explorer 之间差异的策略。2008-04-04
最新评论