and issue: only one viewed in the list, the initial value of the

Question

Some datalists are not viewed properly. Only the initial value of the input is proposed in the datalist.Where is my fault ?

I generate with php and data from Amazon, Google and French BnF (National Library) some datalists so that the user may choose his proper information. It works most of the time (95%). But I get issues with some datalists. Only one option is viewed, the initial value of the input.

Code 1:

  <input    id="author" name="item_author" value="Sophie de  Ségur"  onchange="javascript:submit();"    list="data_author">
  <datalist id="data_author">
    <option value="Comtesse de Ségur">Amazon</option>
    <option value="Comtesse de Ségur">BnF</option>
    <option value="Sophie Rostopchine de Ségur">Google</option>
    <option value="Sophie de  Ségur">BnF</option>
    <option value=" Bertall">BnF</option>
  </datalist>

Result code 1: Only fourth option viewed (initial value of input).

Example 2:

  <input    id="author" name="item_author" value="Catherine  Ard"  onchange="javascript:submit();"  list="data_author">
  <datalist id="data_author">
    <option value="Mickael Wiles">Amazon</option>
    <option value="[textes par Catherine Ard]">BnF</option>
    <option value="Catherine  Ard">BnF</option>
  </datalist>

Result code 2: Only last option viewed (initial value of input)

Example 3:

  <input    id="publisher" name="item_publisher" value="Gallimard jeunesse"  onchange="javascript:submit();"    list="data_publisher">
  <datalist id="data_publisher">
    <option value="Editions Gallimard">Amazon</option>
    <option value="Gallimard jeunesse">BnF</option>
  </datalist>

result code 3: Only last option viewed (initial value of input)

In all 3 examples, when I click on the arrow at the right of the input (on chrome), I expect to get a menu with all options. But I get only the option that is the value of the input.

Answer 1

Problem is linked to autocomplete of "input" with its initial value, an autocomplete that can't be switched "off".

So solution in the context of "onchange="javascript:submit();"" is to use 2 "input".

First "input" with datalist, value="" and onmousedown="value = '';" in the short width "input".

Second "input" with the initial value.

NB1: Depending on the "form" context, you may use two different "name" for the two "input" (and processed them in PHP or JS).

NB2: cause of width constraint (nicer and smaller MMI), I prefer an "input" with a datalist rather than a "select".

Solution for example 1:

  <input    id="author" name="item_author" onchange="javascript:submit();"  list="data_author" onmousedown="value = '';" style="width:5vmin;">
  <datalist id="data_author">
    <option value="Comtesse de Ségur">Amazon</option>
    <option value="Comtesse de Ségur">BnF</option>
    <option value="Sophie Rostopchine de Ségur">Google</option>
    <option value="Sophie de  Ségur">BnF</option>
    <option value=" Bertall">BnF</option>
  </datalist>
  <input    id="author" name="item_author" value="Sophie de  Ségur"  onchange="javascript:submit();">

Thanks to:

• Bryan Dellinger: https://stackoverflow.com/users/2744722/bryan-dellinger for his proposal ;
• analysis in: How to turn off autocomplete while keep using datalist element in html ;
• "binary" j08691: https://stackoverflow.com/users/616443/j08691 (in memory of the binary reverse engineering of my "Sharp PC 1245" in the 80's).

Answer 2

Extending @Franck's answer - He is absolutely right about the initial value causing the behaviour of only one option showing up.

Just offering my solution to this - on focus you can get the value, set it as a placeholder and clean the field - so it is still visible but the datalist works just fine.

With jQuery it would be something along these lines;

my_input.focus(function(){
    var initial_value = $(this).val()
   $(this).val("")
   $(this).attr("placeholder", initial_value)
   ...
)}