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

 更新时间:2015年03月18日 14:55:58   投稿:hebedich  
这篇文章主要介绍了javascript实现ecshop搜索框键盘上下键切换控制,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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

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

相关文章

  • 原生js编写贪吃蛇小游戏

    原生js编写贪吃蛇小游戏

    这篇文章主要为大家详细介绍了原生js编写贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js substr支持中文截取函数代码(中文是双字节)

    js substr支持中文截取函数代码(中文是双字节)

    js substr支持中文截取函数代码,中文是双字节,配有实例需要的朋友可以参考下
    2013-04-04
  • JavaScript第一篇之实现按钮全选、功能

    JavaScript第一篇之实现按钮全选、功能

    这篇文章主要介绍了JavaScript第一篇之实现按钮全选、功能的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • js实现鼠标拖拽多选功能示例

    js实现鼠标拖拽多选功能示例

    本篇文章主要介绍了js实现鼠标拖拽多选功能示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js对象浅拷贝和深拷贝详解

    js对象浅拷贝和深拷贝详解

    这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 深入理解JavaScript字节二进制知识以及相关API

    深入理解JavaScript字节二进制知识以及相关API

    当前,前端对二进制数据有许多的API可以使用,这丰富了前端对文件数据的处理能力,有了这些能力,就能够对图片等文件的数据进行各种处理。本文将着重介绍一些前端二进制数据处理相关的API知识,希望对大家有所帮助
    2023-02-02
  • 如何优雅地取消 JavaScript 异步任务

    如何优雅地取消 JavaScript 异步任务

    这篇文章主要介绍了如何优雅地取消 JavaScript 异步任务,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 深入理解Javascript中的作用域链和闭包

    深入理解Javascript中的作用域链和闭包

    之前我们讲到数组遍历, 本文我们更进一步, 讲讲如何提高遍历的效率. 下面这篇文章主要深入的介绍了Javascript中作用域链和闭包的相关资料,需要的朋友可以参考下
    2017-04-04
  • ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla

    ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla

    使特定于 Internet Explorer 的 Web 应用程序在 Mozilla 上运行时,您遇到过麻烦吗?本文讨论了将应用程序迁移到基于开源 Mozilla 浏览器上时的常见问题。首先讨论跨浏览器开发的基本技术,然后介绍克服 Mozilla 和 Internet Explorer 之间差异的策略。
    2008-04-04
  • 使用flutter创建可移动的stack小部件功能

    使用flutter创建可移动的stack小部件功能

    本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完成可拖动功能,需要的朋友可以参考下
    2021-10-10

最新评论

?


http://www.vxiaotou.com