自己写了个自动补全输入的js,但是按上下键的时候无法滚动-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

自己写了个自动补全输入的js,但是按上下键的时候无法滚动

a123456678 2016-07-08 16:35:28 1286
.box { padding: 2px; border: 1px solid #A3A3A3; width: 359px; height: 16px; background: #FFF; position: relative; float: left }
 
.list { width: 363px; position: absolute; background: #FFF; border: 1px solid #000; left: -1px; top: 21px; list-style: none; height: 212px; display: none; overflow: auto }
 
.list li { padding: 2px; font-size: 14px; cursor: default; float: none; margin-right: 0 }
 
.list li i { font-style: normal; color: red }
 
.list li.hover { background: rgba(39, 133, 231, 0.30); font-weight: bold }

$(function(){
var $box = $('.box'), $area = $('#area'), $list = $('.list');
$area.keydown(function (event) { 
    if (event.which == 38) {
        event.preventDefault();
        keychang("up")
    } else if (event.which == 40) {
        event.preventDefault();
        keychang();
    }
});
 
function keychang(up) {
    var hover = $list.children('.hover'), index = hover.index();
    if (up == "up") {
        if (index == 0) {
            hover.removeClass('hover');
            $list.children('li:last').addClass('hover');
        } else {
            hover.removeClass('hover').prev().addClass('hover');
        }
    } else {
        if (index == ($list.children('li').length - 1)) {
            hover.removeClass('hover');
            $list.children('li:first').addClass('hover');
        } else {
            hover.removeClass('hover').next().addClass('hover');
        }
    }
})

<div class="box">
<input type="text" name="area" id="area"/>
<ul class="list">
<li area_id="858" class=""><i>黄</i>北坪乡</li>
<li area_id="917" class="hover"><i>黄</i>壁庄镇</li>
<li area_id="936" class=""><i>黄</i>各庄镇</li>
<li area_id="1019" class="">东<i>黄</i>坨镇</li>
<li area_id="1315" class=""><i>黄</i>金堤乡</li>
<li area_id="1437" class=""><i>黄</i>沙镇</li>
<li area_id="1472" class=""><i>黄</i>粱梦镇</li>
<li area_id="1717" class="">西<i>黄</i>村镇</li>
<li area_id="1781" class=""><i>黄</i>石口乡</li>
<li area_id="2207" class=""><i>黄</i>石崖乡</li>
<li area_id="858" class=""><i>黄</i>北坪乡</li>
<li area_id="917" class=""><i>黄</i>壁庄镇</li>
<li area_id="936" class=""><i>黄</i>各庄镇</li>
<li area_id="1019" class="">东<i>黄</i>坨镇</li>
<li area_id="1315" class=""><i>黄</i>金堤乡</li>
<li area_id="1437" class=""><i>黄</i>沙镇</li>
<li area_id="1472" class=""><i>黄</i>粱梦镇</li>
<li area_id="1717" class="">西<i>黄</i>村镇</li>
<li area_id="1781" class=""><i>黄</i>石口乡</li>
<li area_id="2207" class=""><i>黄</i>石崖乡</li>
</ul>
</div>

jquery有办法判断某个元素是否被挡住么?

怎么才能把滚动条滚动到正好的位置??

ul的高度是212px而且是overflow: auto的,按上下键选中li已经实现了,可是按上下键的时候滚动条不动,我希望能按上下键的时候判断如果当选择的li超出了ul的范围的话就滚动到可以看到选中的li的位置

JavaScript
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:53:39

    1.jquery有办法取某个元素是否被挡住不知道什么意思!

    2.滚动条滚动用下面代码可以滚动到指定id 的位置

    $("html,body").animate({scrollTop: $("#id").offset().top},1000)

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程