JS：入力フィールド、ドロップダウンオプションの変更

Question

私は以下のように入力フィールドに自分のドロップダウンオプションを構築しています：

<input class="search" type="text"> 
<div class="dropdown"> 
    <div class="option" data-options="1">1</div> 
    <div class="option" data-options="2">2</div> 
    <div class="option" data-options="3">3</div> 
    <div class="option" data-options="4">4</div> 
    <div class="option" data-options="5">5</div> 
</div> 

を私は少しの二つの機能で困惑しています：

「入力」フィールドに入っているときに、矢印キーボードボタン（下または上のボタン）を使用して、オプションの1つを選択できるようにしたいと考えています（.option:hover{background:black; color:white;}と2.キーボードの矢印ボタンを押すと入力フィールドに表示されます。

ご提案は大変ありがとうございます。

ありがとうございます。

Answer 1

入力をクリックしてキーの矢印を上下に移動してナビゲートしてもよいかどうかを確認してください。

$(document).ready(function(){ 
 
\t window.displayBoxIndex = -1; 
 

 
\t $("#search").keyup(function(e) { 
 
\t \t if (e.keyCode == 40) { Navigate(1); } 
 
\t \t if(e.keyCode==38) { Navigate(-1); } 
 
\t }); 
 
        
 
\t var Navigate = function(diff) { 
 
\t \t $('#search').val(''); 
 
\t \t displayBoxIndex += diff; 
 
\t \t var oBoxCollection = $(".option"); 
 
\t \t if (displayBoxIndex >= oBoxCollection.length) { 
 
\t \t \t displayBoxIndex = 0; \t \t \t 
 
\t \t } 
 
\t \t if (displayBoxIndex < 0) { 
 
\t \t \t displayBoxIndex = oBoxCollection.length - 1; 
 
\t \t } 
 
\t \t var cssClass = "option_box_hover"; 
 
\t \t oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass); 
 
\t \t var optionsel = $(".option_box_hover").attr('data-options'); 
 
\t \t $('#search').val(optionsel); 
 
\t } 
 
\t 
 

 
});

.option_box_hover, .option_box:hover 
 
{ 
 
    background:black; 
 
    color:#FFFFFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<input id="search" class="search" type="text"> 
 
<div class="dropdown"> 
 
    <div class="option" data-options="1">1</div> 
 
    <div class="option" data-options="2">2</div> 
 
    <div class="option" data-options="3">3</div> 
 
    <div class="option" data-options="4">4</div> 
 
    <div class="option" data-options="5">5</div> 
 
</div>

歓声！