HTML5中数据列表的滚动条 - Scroll bar for Datalist in HTML5

我在HTML5中使用datalist时遇到问题，我的option值中有10000行要显示，我正在使用PHP从mysql进行填充，由于某些原因，我看不到任何滚动条，我尝试了overflow:scroll设置height和width，但没有帮助。请帮帮我！

<div class="container">
    <form action="NutritionDataBank.php" method="post">
        <label>Select NDBNum:</label>
        <input list="ndbnum" id="ndb" placeholder="e.g.1001" size="20" multiple>
        <datalist id="ndbnum">
            <?php
                //...                               
                while($row = mysqli_fetch_array($result)){
                   echo "<option value=$row[ndbNum]></option>"; 
                }
            ?>
        </datalist>
    </form>
</div>

不幸的是，您对datalist属性无能为力。数据列表目前不支持任何CSS样式，并且特定的视觉特征是特定于浏览器的。一些浏览器可能会选择为长列表添加滚动条。

如果这是不可接受的，您可能不得不忘记数据列表，并通过Javascript实现ComboBox。我相信JQuery有一个自动完成功能，这可能是合适的。

同意上述观点。然而，以下是解决方案。这是小提琴(http://jsfiddle.net/v30gqws5/9/)

var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope, $timeout) {
  $scope.CountryList = [{
      name: 'india'
    },
    {
      name: 'usa'
    },
    {
      name: 'iran'
    },
    {
      name: 'australia'
    },
    {
      name: 'china'
    },
    {
      name: 'delhi'
    },
    {
      name: 'korea'
    },
    {
      name: 'france'
    }
  ];
  const dataList = document.getElementById('dataList');
  const input = document.getElementById('autoComplete');
  var dataList2;
  for (let i = 0; i < $scope.CountryList.length; ++i) {
    if (i < 5) {
      option = document.createElement('option');
      option.setAttribute('value', $scope.CountryList[i].name);
      option.innerHTML = $scope.CountryList[i].name;
      dataList.appendChild(option);
    } else {
      if (i == 5) {
        dataList.innerHTML += '<datalist id="scrolldatalist"/>'
      }
      dataList2 = document.getElementById('scrolldatalist');
      option = document.createElement('option');
      option.setAttribute('value', $scope.CountryList[i].name);
      option.innerHTML = $scope.CountryList[i].name;
      dataList2.appendChild(option);
    }
  }
  dataList.querySelectorAll('option').forEach((el, idx, arr) => {
    el.addEventListener('click', (e) => {
      input.value = el.value;
    });
  });
  dataList2.querySelectorAll('option').forEach((el, idx, arr) => {
    el.addEventListener('click', (e) => {
      input.value = el.value;
    });
  });
  input.addEventListener('focus', showList);
  input.addEventListener('blur', () => {
    setTimeout(() => {
      dataList.classList.remove('show');
      dataList2.classList.remove('show');
    }, 300);
  });
  input.addEventListener('keyup', showList);
  function showList() {
    if (!!input.value) {
      input.setAttribute("list", "dataList");
      dataList.classList.remove('show');
      dataList2.classList.remove('show');
    } else {
      input.removeAttribute("list");
      dataList.classList.add('show');
      dataList2.classList.add('show');
    }
  }
  input.addEventListener('change', () => {
    if (!dataList.querySelector(`option[value='${input.value}']`)) {
      input.value = '';
    } else {
      input.blur();
    }
  });
})

#dataList {
  display: none;
  height: 120px;
  overflow: auto;
  left: 0;
  border: 1px solid black;
}
#scrolldatalist {
  display: none;
  height: 80px;
  overflow: auto;
}
#dataList option,
#scrolldatalist option {
  font-family: arial;
  font-size: 11.8px;
  cursor: pointer;
  padding: 5px 10px;
  font-weight: bold;
}
#dataList.show,
#scrolldatalist.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="TodoCtrl">
    <div class="container">
      <input type="text" id="autoComplete" placeholder="country" autocomplete="off" />
      <datalist id="dataList" />
    </div>
  </div>
</div>