HTML5 中 Datalist 的滚动条

Question

我在 HTML5 中使用 datalist 时遇到问题，我的 option 值中有 10000 行要显示，我正在使用 PHP 从 mysql 填充，由于某种原因我看不到任何滚动条，我尝试了 @987654324 @ 设置 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>

Answer 1

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

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

Answer 2

同意上述。但是下面是解决方法。这里是 jsfiddle (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>