2

我正在尝试使用仅包含数字的 datalist 实现一个输入字段。我注意到 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>

4

1 回答 1

2

看看 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 选项，它消失了，不是吗。因此，当您只有一个字符时，这就是您正在发生的事情。

提琴手

于 2015-02-20T10:13:26.187 回答