javascript - 地铁UI : Cannot change data-autocomplete attribute in autocomplete input tags

Question

我想创建一个动态自动完成输入，可以使用 metroui 进行更新和它类似 jquery m4q 。基于on its documentation ，我需要在input标签中设置data-autocomplete属性，但是动态设置后更新的数据没有显示。

这是我的自动完成输入:

<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 方法找到了解决方法。所以我只是制作了一个带有 id 的 anchor 标记，并使用 m4q/jQuery 插入我的自动完成 input 标记，在该 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');