Scroll bar for Datalist in HTML5

Question

I am having trouble with datalist in HTML5, i have 10000 rows to display in my option values, I am populating from mysql using PHP, for some reason I can't see any scrollbar, i tried overflow:scroll setting height and width but no help. Please help me!

<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

Unfortunately, there's not much you can do with the datalist attribute. The datalist does not currently support any CSS styling, and specific visual characteristics are browser-specific. Some browsers may choose to add scrollbars for long lists.

If this isn't acceptable, you may have to forget the datalist and implement a ComboBox via Javascript. I believe JQuery has an autocomplete function that may be appropriate.

Answer 2

Agree with above.However below is the work around.Here is the 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>