Преобразование формы в поле ввода содержимого в HTML5 datalist

Question

У меня есть рабочая форма, которую я хотел бы преобразовать поля ввода для использования datalists HTML5, чтобы они были автозаполнены, я пробовал различные примеры в Интернете, но по какой-то причине я не получаю его работать.

Я также должен добавить, что данные начинаются как json-файл, возвращенный из api, который я преобразовываю в массив, может иметь значение, если есть лучший способ сделать это, начиная с json-данных.

Любая помощь будет с благодарностью принята.

Благодаря

Гордон

Старый рабочий код

<select name="group[]"> 
    <option value=""></option> 
    <?php 
     foreach ($groups as $group) { 
    ?> 
     <option value=" 
      <?php echo $group["name"];?>"> 
      <?php echo $group["name"];?> 
     </option> 
    <?php 
     } 
    ?> 
</select> 

Последняя попытка нового кода

<input type="text" id="groups" list="groups" /> 
<datalist id="groups"> 
    <?php foreach ($groups as $group) { 
      echo "<option value=" . $group['name'] . "</option>" ; 
     } 
    ?> 
</datalist> 

Solution, выяснили после того, как спать на ней! надеюсь, что это помогает другим

<input type="text" id="groups" list="group" id="grp"/> 
    <datalist id="group"> 
    <?php foreach ($groups as $group) { ?> 
     <option value="<?php echo $group['name']; ?>"> 
     <?php echo $group['name']; ?></option> 
    <?php } ?> 
</datalist> 

Answer 1

Почему у вашего тега ввода и тега данных есть один и тот же идентификатор? Кроме того, вам необходимо добавить кнопку отправки. Кроме того, как я вижу, что ваш код имеет ошибку

echo "<option value=" . $group['name'] . "</option>" ; 

должно быть,

echo "<option value=" . $group['name'] . "></option>" ; 
             ^closing tag. Missing here 

Тег не был закрыт.

Ссылка на небольшой рабочий пример скрипкой - https://jsfiddle.net/s3864qxy/1/

<input list="browsers" name="browser"> 
<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 
<input type="submit"> 

Надежда, что помогает!