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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 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中文件缓存转内存缓存的方法
2011/12/06 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP常用的小程序代码段
2015/11/14 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
React Router基础使用
2017/01/17 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python上下文管理器和with块详解
2017/09/09 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
后备干部培训方案
2014/05/22 职场文书
应届大专生求职信
2014/06/26 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
MySQL8.0.18配置多主一从
2021/06/21 MySQL