javascript - MetroUI：无法更改自动完成输入标签中的数据自动完成属性

Question

我想创建一个动态自动完成输入，可以使用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's方法找到了解决insertAfter方法。所以我刚刚制作了一个带有 id 的锚标签，并在该锚之后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');