‹input› и ‹datalist› проблема: в списке просматривается только одна ‹option›, начальное значение ‹input›

Некоторые списки данных не отображаются должным образом. В списке данных предлагается только начальное значение ввода. В чем моя вина?

Я генерирую с помощью php и данных из Amazon, Google и французской BnF (Национальной библиотеки) некоторые списки данных, чтобы пользователь мог выбрать нужную информацию. Это работает большую часть времени (95%). Но у меня возникают проблемы с некоторыми списками данных. Просматривается только одна опция, начальное значение ввода.

Код 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>

Код результата 1: просмотрен только четвертый вариант (начальное значение ввода).

Пример 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>

Код результата 2: просмотрен только последний вариант (начальное значение ввода)

Пример 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>

код результата 3: просмотрен только последний вариант (начальное значение ввода)

Во всех трех примерах, когда я нажимаю на стрелку справа от ввода (в хроме), я ожидаю получить меню со всеми параметрами. Но я получаю только вариант, который является значением ввода.


html html-datalist
person Franck    schedule 02.01.2019    source источник
comment
Возможный дубликат Как заставить браузер отображать все параметры списка данных, когда установлено значение по умолчанию?   -  person Bryan Dellinger    schedule 03.01.2019

Ответы (2)


arrow_upward
1
arrow_downward

Проблема связана с автозаполнением «ввода» с его начальным значением, автозаполнением, которое нельзя «выключить».

Таким образом, решение в контексте "onchange="javascript:submit();"" состоит в том, чтобы использовать 2 "ввода".

Первый «ввод» с datalist, value="" и onmousedown="value = '';" в короткой ширине "ввод".

Второй «вход» с начальным значением.

NB1: В зависимости от контекста «формы» вы можете использовать два разных «имени» для двух «вводов» (и обрабатывать их в PHP или JS).

NB2: из-за ограничения ширины (лучше и меньше MMI), я предпочитаю «ввод» со списком данных, а не «выбор».

Решение для примера 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();">

Благодаря:

person Franck    schedule 03.01.2019

arrow_upward
0
arrow_downward

Расширение ответа @Franck. Он абсолютно прав в отношении начального значения, вызывающего поведение только одного варианта.

Просто предлагаю свое решение для этого - на focus вы можете получить значение, установить его как placeholder и очистить поле - так что оно все еще видно, но datalist работает отлично.

С jQuery это было бы что-то вроде этого;

my_input.focus(function(){
    var initial_value = $(this).val()
   $(this).val("")
   $(this).attr("placeholder", initial_value)
   ...
)}
person David Louda    schedule 03.06.2021