Question

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

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

示例

＆＃13;

<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>

＆＃13;

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时会发生什么，整个文本来自m选项，它会消失，不是。所以当选项中只有一个字符时，这正是你所发生的事情。

JsFiddle

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

1 个答案: