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

Question

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

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

示例

<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

查看数据列表的工作原理：

If there is only one character in the option and you type it , there is no reason to show that already typed character in dropdown

因此如果有

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

然后键入 i、g 或 s 将不会填充列表，因为它已经键入，所以完整的单词

数字相似（datalist 不会以不同方式考虑数字和文本）

<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

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

HTML5 datalist does not recognize numbers in autocomplete function

html

html-datalist