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


Posted in Javascript onMarch 18, 2015

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

            }

        };

    };

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

Javascript 相关文章推荐
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
js跑步算法的实现代码
Dec 04 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
javascript版2048小游戏
Mar 18 #Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 #Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 #Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 #Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 #Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 #Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 #Javascript
You might like
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python中模块string.py详解
2017/03/12 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
详解python metaclass(元类)
2020/08/13 Python
利用python汇总统计多张Excel
2020/09/22 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
生产班组长岗位职责
2014/01/05 职场文书
大学军训感言
2014/01/10 职场文书
年终总结会议主持词
2014/03/17 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
业务员岗位职责
2015/02/03 职场文书
2015年保管员工作总结
2015/04/30 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书