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

前端之家收集整理的这篇文章主要介绍了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); } }; };

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

原文链接:https://www.f2er.com/js/55208.html

猜你在找的JavaScript相关文章