0

I have a dynamic <datalist> associated with my <input>: the list of <option> is modified while I type.

The problem is that despite the fact that there are <option> entries in the <datalist>, the dropdown does not appear.

Below is a showcase: we start with an empty search field

enter image description here

I start to type one letter, all the <option> are available

enter image description here

After a few letters, some of the <option> are dynamically removed (below is a case where there is just one left)

enter image description here

Why isn't the dropdown with the available options always visible? How to trigger its visibility (if possible)?

Johannes
  • 64,305
  • 18
  • 73
  • 130
WoJ
  • 27,165
  • 48
  • 180
  • 345

1 Answers1

3

The dropdown created with the datalist entries will dynamically always - and only - display entries that match what you already typed. If you already typed "ent" in that field, the dropdown will only contain those entries that contain the string "ent" at some position, for example "entry", "gentrification", "went", "entity" and so on. If the field is still empty, the dropdown will display all available entries since there is no string or letter to match.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thank you. I misunderstood `` as being the list of what will be in the dropdown. Which does not make sense as this list is normally static. Now this is clear and I will need to look for for something which does that: a dropdown which shows all elements of a list. – WoJ Jun 11 '17 at 20:28
  • https://stackoverflow.com/questions/6865943/html-form-select-option-vs-datalist-option – Tim Morton Jun 11 '17 at 20:33
  • @TimMorton: thanks but I need a typing area. This is a predictive search of sorts. – WoJ Jun 12 '17 at 05:39