javascript - 怎么实现像百度搜索框那样的上下键支持?
大家讲道理
大家讲道理 2017-04-11 12:12:21
[JavaScript讨论组]

1.想做一个想百度搜索页的效果,支持在搜索结果中通过上下键选择不同结果,但是当我按向上键的时候,文本框中的光标却跑到前面,如何让其一直停留在最后面?
2.代码:



//js
$('.searchInput').click(function(e){
        e.stopPropagation();
    }).keyup(function(){
        var newVal = $(this).val();
        if(newVal.toLowerCase() == 'jy' || newVal.toLowerCase() == 'sy'){
            $('.fixed-input .search-result').slideDown('fast');
        }else{
            if(!$(this).is(":focus")){
                $('.fixed-input .search-result').slideUp('fast');
            }
        }
    }).keydown(function(e){
        var key = event.keyCode;
        var curIndex = $('.search-result li.cur').size() > 0 ? $('.search-result li.cur').index() : -1;
        if (key == 13){
            $('.search-result li.cur a').click();
        } /*回车搜索*/

        if ($.trim($(this).val()).length == 0)
            return;

        if (key == 38) { /*向上按钮*/
            if(curIndex > 0){
                $('.search-result li').eq(curIndex - 1).addClass('cur').siblings('li').removeClass('cur');
            }else if(curIndex == -1){
                $('.search-result li').eq(0).addClass('cur');
            }else{
                $('.search-result li').eq($('.search-result li').size() - 1).addClass('cur').siblings('li').removeClass('cur');
            }

            var inputVal = $('.search-result li.cur a span').text();
            $(this).val(inputVal);
            //TODO 如果是向上按钮,则需设置光标位置
        } else if (key == 40) {/*向下按钮*/
            if(curIndex == -1){
                $('.search-result li').eq(0).addClass('cur');
            }else if(curIndex < $('.search-result li').size() - 1){
                $('.search-result li').eq(curIndex + 1).addClass('cur').siblings('li').removeClass('cur');
            }else{
                $('.search-result li').eq(0).addClass('cur').siblings('li').removeClass('cur');
            }

            $(this).val($('.search-result li.cur a span').text());
        }
    });
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(2)
巴扎黑

这种控件现成的非常多噢。

jQuery UI Autocomplete
Bootstrap typeahead.js

PHP中文网

好像是应该添加prevent阻止默认事件

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号