通过up、down、enter键实现搜索结果选择功能（模拟搜索引擎）

最新推荐文章于 2021-04-02 11:48:24 发布

原创最新推荐文章于 2021-04-02 11:48:24 发布 · 743 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

前端小技巧

5 篇文章

订阅专栏

本文介绍了如何通过监听up、down和enter键来实现搜索结果的选择功能，类似于搜索引擎的交互体验。核心思路是利用事件触发次数对搜索结果数量取余，动态设置active元素，从而实现焦点的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、最终实现效果

这里写图片描述

2、实现思路

1、通过监听up、down、enter键，对搜索结果进行样式变换。
2、通过一个变量来储存事件触发次数，再用这个变量对收索结果个数进行求余，进而定位active元素的位置。。。

3、废话少说，上代码

//down and up key
var key = 0;
function downUpKey() {
    document.onkeydown = function(e) {
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        var _key = key % $(".prompt-box").find('ul li').length;
        var index;
        if (code == 40) {
            $(".prompt-box").find('ul li').removeClass('active');
            $(".prompt-box").find('ul li').eq(_key).addClass('active');
            //赋值操作
            key++;
        } else if (code == 38) {
            index = $(".prompt-box").find('ul li').filter(".active").index();
            $(".prompt-box").find('ul li').removeClass('active');
            $(".prompt-box").find('ul li').eq(index - 1).addClass('active');
            //赋值操作
            key--;
        } else if (code == 13) {
            //赋值操作
            $(".prompt-box").addClass('hidden');
            return false;//防止表单提交
        }
    }
}