javascript - JS : input field and dropdown option change

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.当您在“输入”字段中时，我希望能够使用箭头键盘按钮(向下或向上按钮)选择其中一个选项(选项 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>

干杯!!