如何获取datalist中用户输入后剩余的匹配自动补全选项？

现有关联datalist的input元素代码：

function validate() {
  let items = document.getElementById("zip").magicalMethodThatReturnsDatalistOptions();
  console.log("Remaining items: " + items.join(", "));
}

<body> 
  <input id="zip" list="zipcodes" name="zip" oninput="validate()"> 
  <datalist id="zipcodes"> 
    <option value=11011> 
    <option value=11342> 
    <option value=12121> 
    <option value=15453> 
    <option value=10001> 
  </datalist> 
</body>

需求：当用户输入内容时，获取datalist中剩余的符合条件的自动补全选项。例如用户输入“11”时，控制台应输出“Remaining items: 11011, 11342”。

目前可以自行编写输入值与选项数组的匹配逻辑，但希望直接访问浏览器已筛选好的该数据数组，询问是否有简便实现方法。

没有原生API能直接获取浏览器已经筛选好的datalist选项列表——浏览器内部的筛选逻辑是黑盒，不会把筛选后的结果暴露给JS。

只能自己实现匹配逻辑，操作起来也很简单：获取datalist的所有选项，再根据当前输入值过滤出符合条件的选项即可。修改后的代码如下：

function validate() {
  const input = document.getElementById("zip");
  const datalist = document.getElementById(input.list.id);
  // 提取所有选项的value值
  const allOptions = Array.from(datalist.options).map(opt => opt.value);
  // 按前缀匹配过滤，和浏览器默认datalist筛选逻辑一致
  const matchedItems = allOptions.filter(value => value.startsWith(input.value));
  console.log("Remaining items: " + matchedItems.join(", "));
}

这个实现的逻辑和浏览器原生datalist的前缀匹配行为一致，能满足需求。

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