我正在尝试创建一个自动完成搜索栏，用于查询存在于子组件中的动态生成的注释

<!-- 父组件 -->
<div>
  <input type="text" id="search-bar" oninput="search()">
  <div id="results"></div>
  <子组件></子组件>
</div>

<!-- 子组件 -->
<div id="comments">
  <div>注释1</div>
  <div>注释2</div>
  <div>注释3</div>
  ...
</div>

<script>
  function search() {
    // 获取输入框的值
    var input = document.getElementById("search-bar").value;
    var comments = document.getElementById("comments").children;
    var results = [];

    // 遍历子组件中的注释
    for (var i = 0; i < comments.length; i++) {
      var comment = comments[i].innerHTML;
      
      // 检查注释是否与输入框的值匹配
      if (comment.includes(input)) {
        results.push(comment);
      }
    }

    // 将结果展示在结果容器中
    var resultsContainer = document.getElementById("results");
    resultsContainer.innerHTML = "";

    for (var j = 0; j < results.length; j++) {
      var result = document.createElement("div");
      result.innerHTML = results[j];
      resultsContainer.appendChild(result);
    }
  }
</script>