Полоса прокрутки для Datalist в HTML5

У меня возникают проблемы с datalist в HTML5, у меня есть 10000 строк для отображения в моих значениях option, я заполняюсь из mysql с помощью PHP, по какой-то причине я не вижу прокрутки, я пробовал 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>

Ответы

Ответ 1

К сожалению, вы не можете сделать с атрибутом datalist. В настоящее время datalist не поддерживает стиль CSS, а конкретные визуальные характеристики зависят от браузера. Некоторые браузеры могут добавлять полосы прокрутки для длинных списков.

Если это неприемлемо, вам, возможно, придется забыть datalist и реализовать ComboBox через Javascript. Я считаю, что JQuery имеет функцию автозаполнения, которая может быть подходящей.

Ответ 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">
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <div class="container">
      <input type="text" id="autoComplete" placeholder="sector" autocomplete="off" />
      <datalist id="dataList" />
    </div>
  </div>
</div>

Ответ 3

Согласитесь с вышесказанным. Однако ниже приводится обходной путь. Вот 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>