Question

我的MVC视图中的HTML数据列表正常工作。我想做的是，当我输入数据列表时，它应该自动专注于第一个搜索到的选项。我不想按向下箭头键。

我试图通过按 tab 键来选择第一个选项，但是它是从所有选项中而不是从搜索列表中选择第一个值。这是我尝试过的代码。

$('#3').on('keydown', function (e) {
     if(e.keyCode===9){
     
     		var input = $(this)
        var list = $("#" + input.attr("list"))
        var options = $($(list).prop("options"))
        input.val(options.eq(0).val())
     
     }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Favorite color:
  <input type="text" name="favorite_color" list="colors" placeholder="Enter a color" id ='3'/>
  <datalist id="colors">
  <option value="Blue"></option>
   <option value="Brown" />
   <option value="Cyan"/>
   <option value="Green"/>
   <option value="Orange"/>
   <option value="Pink"/>
   <option value="Purple"/>
   <option value="Red"/>
   <option value="Yellow"/>
  </datalist>

有没有办法在HTML数据列表中选择第一个搜索值

0 个答案: