Search code examples
htmlhtml-datalist

HTML5 datalist does not recognize numbers in autocomplete function

I am trying to implement an input field with datalist that contains numbers only. I have noticed that the datalist's autocomplete functions does not work for datalist values that are equal to numbers.

How can I make the autocomplete function work for numeric values?

EXAMPLE

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

Solution

  • see how datalist works:

    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

    Thus if there is

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

    then type in i,g or s will not populate the list, because it is already typed, the full word

    Similar for numbers(datalist will NOT consider numbers and text differently)

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

    will not work,

    Instead try this:

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

    this will of-course work until you type the complete word which matched an option(at this moment there will be no need to show the same thing in dropdown)

    This always happen, for example, your code:

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

    what happens when you type in Greece, the whole text fromm option, it disappears, isn't it. so that is exactly what is happening with you when there is just one character in option.

    JsFiddle