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。当您进入＆＃34;输入＆＃34;字段，我希望能够使用箭头键盘按钮（向下或向上按钮）选择其中一个选项（选项css更改，如.option:hover{background:black; color:white;}和 2。在输入字段中显示为你按下键盘上的箭头按钮。

任何建议都将不胜感激。

谢谢。

Answer 1

请检查是否可以点击输入并上下使用键箭头进行导航。

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

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

});

.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>

欢呼声!!