HTML的datalist元素能否使用optgroup实现选项分组？

<optgroup> 仅为 <select> 元素的专属功能，HTML 规范不支持在 <datalist> 内使用 <optgroup>，这是你代码中分组不生效的根本原因。

原因说明 #

根据 W3C 制定的 HTML 标准，<datalist> 允许的子节点仅包含 <option> 元素和空文本节点，浏览器解析 <datalist> 时会直接忽略掉其中的 <optgroup> 标签，所以你写的所有选项都会直接平铺展示，不会呈现分组效果。

可行替代方案 #

• 如果必须保留输入框联想匹配的交互，可以基于 JavaScript 手写自定义下拉联想组件，自行实现分组渲染逻辑
• 如果可以接受下拉选择的交互，将当前输入框替换为 <select> 元素，即可正常使用 <optgroup> 实现选项分组

问题复现代码 #

<label>Välj en elbil
<input class="downdrop" id="valdModellCompare2" list="elfordon" onchange=getSelectValue();></label>
<datalist id="elfordon">
   <optgroup value="Elbilar">elbil
      <option value="teslas">Tesla Model S</option>
      <option value="teslax">Tesla Model X</option>
      <option value="tesla3">Tesla Model 3</option>
      <option value="i3">BMW i3</option>
      <option value="id3">Volkswagen ID.3</option>
      <option value="id4">Volkswagen ID.4</option>
      <option value="niro">KIA Niro</option>    
      <option value="etron">Audi e-Tron</option>
      <option value="polestar">Polestar 2</option>
      <option value="xc40e">Volvo XC40 Recharge</option>
      <option value="leaf">Nissan Leaf</option>
      <option value="taycan">Porsche Taycan</option>
</optgroup>
<optgroup value="Plug-in Hybrider">hybrid
      <option value="outlander">Mitsubitshi Outlander Hybrid</option>
      <option value="v60hybrid">Volvo V60 twin engine</option>
      <option value="optima">KIA Optima SV</option>
      <option value="passatgte">Volkswagen Passat GTE</option>
      <option value="priushybrid">Toyota Prius Hybrid</option>
      <option value="golfgte">Volkswagen Golf GTE</option>
      <option value="x545e">BMW X5 45e</option>
      <option value="530e">BMW 530e</option>
   </optgroup>

</datalist>

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