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 相关文章推荐
javascript demo 基本技巧
Dec 18 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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笔记之常用文件操作
2010/10/12 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP6新特性分析
2016/03/03 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python 为什么说eval要慎用
2019/03/26 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
编程输出如下图形
2013/11/24 面试题
音乐器材管理制度
2014/01/31 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
hive数据仓库新增字段方法
2022/06/25 数据库