源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-10-21 19:29 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript实现ecshop搜索框键盘上下键切换控制
在createSelect()函数中,返回一个对象,这个对象的两个方法next() 和prev()中的调用的moveSelect()能正确的指向到该函数,也可以把 moveSelect()函数放到外面来。
[u]复制代码[/u] 代码如下:
/* 键盘操作与问题推荐选择 */     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);             }         };     };
以上就是本文分享给大家的全部内容了,希望大家能够喜欢
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部