MetroUI: Cannot change data-autocomplete attribute in autocomplete input tags

Question

I want to create a dynamic autocomplete input that can be updated using metroui and its jquery-like m4q . Based on its documentation, I need to set the data-autocomplete attribute in the input tag, but the updated data is not shown after I set it dynamically.

Here's my autocomplete input:

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

Here's the script at the bottom of the html file:

<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>

Here's terms variable:

But see that there's no auto-completion:

So how do I get it to work? Thanks in advance.

Answer 1

I found a workaround by using m4q's insertAfter method. So I just made an anchor tag with an id, and insert my autocomplete input tag using m4q / jQuery, after that anchor:

    <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');