类似于智能感知的角度自动完成组件，用于遍历视图中的对象/树结构

Question

我目前正在开发行为类似于IDE（例如Visual Studio Code）但在浏览器中的软件。 我需要一个类似于典型的IDE智能感知的angular / typescript组件。用户编写由用户变量创建的提示的文本和自动完成弹出窗口。问题是我希望它包含树结构。

假设用户已创建此对象结构

"tree":
{
  "root_array": [],
  "root_simple": "",
  "root_complex": {
    "childArray": [
      {
        "Leaf1": ""
      }
    ],
    "leaf2": ""
  },
  "root_complex_array": [
    {
      "child_complex": {
        "leaf3": "",
        "leaf_array": []
      }
    }
  ]
}

我想显示以下内容：

带有跟踪插入符号和提示当前水平等

我现在正在自己开发这个组件（如图所示），但是这种行为只是尖叫着要在很酷的组件中的某个地方实现。我可能不擅自使用Google进行搜索，但没有结果。我将不胜感激。 预先感谢！