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> 

我很少有兩個功能感到困惑：

當你在「輸入」字段中時，我希望能夠使用箭頭鍵盤按鈕（向下或向上按鈕）來選擇其中一個選項（選項css更改爲.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>

歡呼聲！