HTML5严格数据分析师

Question

是否有更好的方法可以仅使用列表中的值来限制<input> <datalist>的值？

我正在寻找一种简单的方法来严格遵循列表，并使用<input>标记每个<datalist>。

这是我的代码，但它只指向一个<input>。 或者我如何改进我的代码，以便它能够点击具有<datalist>的所有输入？

<input list="browsers" id="browser">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

<input list="cities" id="city">
<datalist id="cities">
   <option value="Baguio">
   <option value="Manila">
   <option value="Makati">
   <option value="Taguig">
   <option value="Quezon">
</datalist>

<script>
   $("#browser").on("focusout", function() {
      var opts = $('#browsers option').map(function() {
         return this.value;
      }).get();
      if(!opts.includes($("#browser").val())) {
         $.each(opts, function(index, value) {
            if(value.toUpperCase().includes($("#browser").val().toUpperCase())) {
               // suggest possible match
               $("#browser").val(value);
            }
         });
         if(!opts.includes($("#browser").val())) {
            // making it blank if entered value was not in list
            $("#browser").val("");
         }
      }
   });
</script>

https://jsfiddle.net/82ax6hq3/ TIA：D（y）