HTML Datalist无法限制可见项数及添加滚动条问题求助

原生<datalist>的下拉面板样式由浏览器引擎控制，无法直接通过CSS修改高度或限制可见条数，因此需要通过自定义实现来达到需求。以下是两种可行方案：

方案一：自定义下拉面板（推荐，完全可控） #

隐藏原生datalist，用自定义DOM元素模拟下拉列表，可精确控制显示项数和滚动条。

步骤1：修改HTML结构 #

<input type="text" id="trainNoInput" list="trainNoList">
<datalist id="trainNoList" style="display: none;"></datalist>
<!-- 自定义下拉容器 -->
<div id="customDropdown" style="position: absolute; border: 1px solid #ccc; max-height: 150px; overflow-y: auto; background: #fff; display: none; z-index: 1000;"></div>

步骤2：修改JavaScript逻辑 #

保留原有数据生成逻辑，新增自定义下拉的交互代码：

// 提取所有列车编号
let trainNoList = [];
if (markers) {
  trainNoList = markers.map(item => item[20]);
}

const input = document.getElementById('trainNoInput');
const dropdown = document.getElementById('customDropdown');

// 生成并显示最多5个匹配选项
function renderDropdown(filterText = '') {
  dropdown.innerHTML = '';
  // 过滤匹配项
  const filteredItems = trainNoList.filter(no => no.includes(filterText));
  // 只取前5个显示
  const displayItems = filteredItems.slice(0, 5);

  displayItems.forEach(no => {
    const optionEl = document.createElement('div');
    optionEl.style.padding = '8px 12px';
    optionEl.style.cursor = 'pointer';
    optionEl.style.borderBottom = '1px solid #eee';
    optionEl.textContent = no;

    // 点击选项回填值并触发原有定位逻辑
    optionEl.addEventListener('click', () => {
      input.value = no;
      dropdown.style.display = 'none';
      input.dispatchEvent(new Event('input'));
    });

    // hover样式
    optionEl.addEventListener('mouseover', () => optionEl.style.backgroundColor = '#f5f5f5');
    optionEl.addEventListener('mouseout', () => optionEl.style.backgroundColor = '#fff');

    dropdown.appendChild(optionEl);
  });

  // 定位下拉面板到输入框下方
  const inputRect = input.getBoundingClientRect();
  dropdown.style.left = `${inputRect.left}px`;
  dropdown.style.top = `${inputRect.bottom + 2}px`;
  dropdown.style.width = `${inputRect.width}px`;
  // 有匹配项才显示
  dropdown.style.display = filteredItems.length > 0 ? 'block' : 'none';
}

// 绑定输入框事件
input.addEventListener('input', (e) => renderDropdown(e.target.value));
input.addEventListener('focus', () => {
  renderDropdown(input.value);
  clearTimeout(ajaxtimeout);
});
input.addEventListener('blur', () => {
  // 延迟关闭，避免点击选项时直接隐藏
  setTimeout(() => dropdown.style.display = 'none', 200);
  ajaxtimeout = setTimeout(foo, 10000);
});

// 保留原有输入框的地图定位、回车事件逻辑
$("#trainNoInput").on("input", function() {
  var selectedTrainNo = $(this).val();
  
  var rangeCheck = selectedTrainNo.split("-");
  if (rangeCheck.length === 2) {
    vehiclestart = rangeCheck[0];
    vehicleend = rangeCheck[1];
  } else {
    for (var i = 0; i < markers.length; i++) {
      var trainNo = markers[i][20]; 
      if (trainNo == selectedTrainNo) {
        var lat = parseFloat(markers[i][2]);
        var lng = parseFloat(markers[i][3]);
        var setcontentforpopup = "Vehicle"+markers[i][0]+"";
        vehiclestart = 1;
        vehicleend = 99999999999999;
        var popup = L.popup()
          .setLatLng([lat, lng])
          .setContent(setcontentforpopup)
          .addTo(map);
        map.flyTo([lat, lng], 16);
        break;
      }
    }
  }
});

$("#trainNoInput").on("keyup", function(event) {
  if (event.keyCode === 13) {
    markerLookup = {};
    markerClusters.clearLayers();
    foo();
  }
});

方案二：动态过滤原生Datalist选项 #

通过JavaScript动态修改datalist内的选项，只保留最多5个匹配项，缺点是下拉面板样式仍由浏览器控制，滚动条显示取决于浏览器行为。

修改JavaScript逻辑 #

let trainNoList = [];
if (markers) {
  trainNoList = markers.map(item => item[20]);
}

const input = document.getElementById('trainNoInput');
const datalist = document.getElementById('trainNoList');

input.addEventListener('input', (e) => {
  const filterText = e.target.value;
  const filteredItems = trainNoList.filter(no => no.includes(filterText));
  // 只保留前5个选项
  const displayItems = filteredItems.slice(0, 5);

  // 清空并重新生成datalist选项
  datalist.innerHTML = '';
  displayItems.forEach(no => {
    const option = document.createElement('option');
    option.value = no;
    datalist.appendChild(option);
  });
});

// 保留原有输入框的其他事件逻辑...

内容的提问来源于stack exchange，提问作者Krtz07