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

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

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

(0)

相关推荐

  • 使用openSpeDiv方法实现Ecshop登录弹窗框效果

    在ECSHOP的目录/JS/common.js中有一个openSpeDiv方法是实现ECSHOP的弹窗效果的.如果我们想制作一个登录弹窗框,可以截取这个方法里的部分代码. //生成属性选择层 function openSpeDiv(message, goods_id, parent) { var _id = "speDiv"; var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if

  • ECSHOP中实现ajax弹窗登录功能

    在上篇文章给大家介绍了使用openSpeDiv方法实现Ecshop登录弹窗框效果,大家点击参考下 下面介绍如何实现AJAX弹窗登录. 在ECSHOP中的user.PHP中有处理用户登录的请求. /* 处理 ajax 的登录请求 */ elseif ($action == 'signin') { include_once('includes/cls_json.php'); $json = new JSON; $username = !empty($_POST['username']) ? json

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

    在createSelect()函数中,返回一个对象,这个对象的两个方法next() 和prev()中的调用的moveSelect()能正确的指向到该函数,也可以把 moveSelect()函数放到外面来. 复制代码 代码如下: /* 键盘操作与问题推荐选择 */     var curDo = null;     var select = createSelect();     $('#keywords').keyup(function(e){         var theEvent =  e

  • 基于JavaScript实现百度搜索框效果

    本文实例为大家分享了js实现百度搜索框展示效果的具体代码,供大家参考,具体内容如下 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } input{

  • JavaScript实现百度搜索框效果

    最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <

  • JavaScript仿京东搜索框实例

    马上就到双十一了,我们在京东淘宝购物,疯狂剁手的同时,有没有注意到京东的搜索框呢,除了能进行搜索内容以外,它的样式又是如何实现的呢? 下面就分析一下如何实现仿京东的搜索框. 核心分析: JavaScript部分: 1.当文本框获取焦点的时候,div中的字体颜色变为rgb(200,200,200): 2.当文本框失去焦点事件发生时,div中的字体颜色变成原来的样式#989898: 3.当文本框输入内容时,div的属性变为 none,表现效果为文字消失: 4.当清除文本框里面内容时,divdiv的属

  • Flutter实现自定义搜索框AppBar的示例代码

    目录 介绍 效果图 实现步骤 完整源码 总结 介绍 开发中,页面头部为搜索样式的设计非常常见,为了可以像系统AppBar那样使用,这篇文章记录下在Flutter中自定义一个通用的搜索框AppBar记录. 功能点: 搜索框.返回键.清除搜索内容功能.键盘处理. 效果图 实现步骤 首先我们先来看下AppBar的源码,实现了PreferredSizeWidget类,我们可以知道这个类主要是控制AppBar的高度的,Scaffold脚手架里的AppBar的参数类型就是PreferredSizeWidge

  • JavaScript实现搜索框的自动完成功能(一)

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT

  • js实现键盘上下左右键选择文字并显示在文本框的方法

    本文实例讲述了js实现键盘上下左右键选择文字并显示在文本框的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

  • 自动完成的搜索框javascript实现

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮. <div class="search"> <input type="text" value=""

  • javascript搜索框效果实现方法

    本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • JavaScript切换搜索引擎的导航网页搜索框实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> #search ul { list-style-type: none; display: block; width: 100px; height

随机推荐