0
入力フィールドをクリックすると開くドロップダウンメニューがあり、上下の矢印キーをクリックして選択した項目の青い背景をアクティブにします。また、選択した項目を最上部に保持して、選択が消えないようにします。矢印キーでスクロールするときにul要素の中央にメニューの先頭を設定します
私がしたいのは、ユーザーが下矢印キーを1回クリックした後にメニューの中央に「上」を固定することで、ユーザーが上または下にスクロールすると選択が中央にくるようにします。
私はscrollTop（）メソッドを半分に分割して遊んだりしようとしましたが、この作業を行うことはできません。
$(document).ready(function() {
var $menu = $('#menu');
var $input = $('#maininput');
$menu.hide();
$input.focus(function() {
$menu.show();
});
$input.blur(function() {
$menu.hide();
});
$input.on('keyup', function (e) {
if (e.keyCode === 40) { // down
e.preventDefault();
var selected = $(".selected");
var $list = $("li.list");
var index = $list.index(selected);
$list.removeClass("selected");
$list.eq(index + 1).addClass("selected");
$(".main ul").scrollTop($('li').index($(".selected")) * $('.main li').height());
}
if (e.keyCode === 38) { // up
e.preventDefault();
var selected = $(".selected");
var $list = $("li.list");
var index = $list.index(selected);
$list.removeClass("selected");
$list.eq(index - 1).addClass("selected");
$(".main ul").scrollTop($('li').index($(".selected")) * $('.main li').height());
}
})
});li {
list-style: none;
}
ul {
padding: 0px;
margin: 0px;
background-color: #eee;
width: 130px;
height: 120px;
overflow: auto;
overflow-x:hidden;
border-spacing: 10px;
}
.list {
/* padding-top: 5px;
padding-bottom: 5px; */
padding-left: 10px;
height: 40px;
line-height: 2.1em;
}
#maininput {
padding: 10px;
}
.selected {
background-color: #d2d2d2;
border-radius: 4px;
width: 220px;
background-color: #0096d6;
border-radius: 4px;
width: 100%;
color: #ffffff;
}<html>
<body>
<input id="maininput" />
<div class="main">
<ul id="menu">
<li class="list">one</li>
<li class="list">two</li>
<li class="list">three</li>
<li class="list">four</li>
<li class="list">five</li>
<li class="list">six</li>
<li class="list">seven</li>
<li class="list">eight</li>
<li class="list">nine</li>
<li class="list">ten</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</body>
</html>ヘルプが理解されます。ありがとう。