HTML5 datalist 无法识别自动完成功能中的数字

Question

我正在尝试使用仅包含数字的数据列表来实现输入字段。我注意到 datalist 的自动完成功能不适用于等于数字的 datalist 值。

如何使自动完成功能适用于数值？

示例

<h2>Text datalist</h2>
<p>Try typing "Greece"</p>
<input id="text" list="textList" />
<datalist id="textList">
  <option>Greece</option>
  <option>Italy</option>
  <option>Spain</option>
</datalist>

<h2>Number datalist</h2>
<p>Try typing a number (no autocomplete function)</p>
<input id="num" list="numList" />
<datalist id="numList">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>0</option>
</datalist>

Answer 1

看看 datalist 是如何工作的：

如果选项中只有一个字符并且您输入了它，则 没有理由在下拉菜单中显示已经输入的字符

如果有的话

<datalist id="textList">
  <option>g</option>
  <option>i</option>
  <option>s</option>
</datalist>

然后输入i,g 或s 将不会填充列表，因为已经输入了完整的单词

数字类似（数据列表将不会以不同方式考虑数字和文本）

<datalist id="textList">
      <option>0</option>
      <option>1</option>
      <option>2</option>
    </datalist>

不会工作，

试试这个：

 <datalist id="textList">
          <option>01</option>
          <option>11</option>
          <option>22</option>
        </datalist>

这当然会起作用直到您输入与选项匹配的完整单词（此时无需在下拉菜单中显示相同的内容）

---

这总是发生，例如，您的代码：

<datalist id="textList">
  <option>Greece</option>
  <option>Italy</option>
  <option>Spain</option>
</datalist>

当你输入 Greece 时会发生什么，整个文本 fromm 选项，它消失了，不是吗。因此，当您只有一个字符时，这就是您正在发生的事情。

JsFiddle