MetroUI: невозможно изменить атрибут автозаполнения данных в тегах автозаполнения ввода

Question

Я хочу создать динамический ввод c автозаполнения, который можно обновить с помощью metroui и его jquery -подобного m4q . Исходя из его документации , мне нужно установить атрибут data-autocomplete в теге input, но обновленные данные не отображаются после его динамической установки.

Вот мое автозаполнение input:

<input id="search-term"
         class="w-100 w-50-md"
         type="text"
         data-role="input"
         name="search-term"
         placeholder="Cari istilah..."
         data-autocomplete="">

Вот скрипт внизу html файла:

<script type="text/javascript">
  // load demo data
  const terms = Object(<?php echo json_encode(array_keys(load_demo_data())) ?>);
  let termsToString = terms.toString();
  termsToString = termsToString.replace(/,/g, ', ');
  // console.log(termsToString);
  $('#search-term').attr('data-autocomplete', termsToString);
</script>

Вот terms переменная:

Но посмотрите, что автозаполнения нет:

Так как мне заставить его работать? Заранее спасибо.

Answer 1

Я нашел обходной путь, используя метод m4q insertAfter. Поэтому я просто сделал тег привязки с идентификатором и вставил свой автозаполнение тега input, используя m4q / jQuery, после этого привязки:

    <form class="d-flex flex-wrap" action="definition.php" method="post">
      <a id="search-term-index"></a>

      <button type="submit"
              class="w-100 w-25-md mt-2 mt-0-md ml-2-md button primary">
        Cari
      </button>
    </form>

    $("<input class=\"w-100 w-50-md\" type=\"text\" data-role=\"input\" name=\"search-term\" placeholder=\"Cari istilah...\" data-autocomplete=\"" + termsToString + "\">")
      .insertAfter('#search-term-index');