Single page application SPA web应用程序中的树结构

我正在启动一个单页应用程序，但仍然没有选择任何框架。它需要做的唯一复杂的事情是允许用户从树结构中为表单的一个字段选择一个元素。如果它能同时使用鼠标选择和键盘自动完成，那就太好了。这棵树有5层深，包含大约500个元素。实现这一点的好方法是什么？

这里有一个小提琴，向您展示如何递归地构建树：

就输入而言，将单击函数绑定到每个节点将调用一个函数，该函数可以访问与单击的节点关联的所有数据：

view:
<li data-bind="text: name, click: yourFunction"></li>

viewmodel: 
var yourFunction = function (data) {
//your function will have access to the node via data
};

视图：

视图模型：
var yourFunction=函数（数据）{
//您的功能将通过数据访问节点
};

对于键盘输入，可以将输入添加到视图中，并将值绑定到可观察值。从那里，您可能可以在线找到子字符串搜索算法，甚至可以找到插件（jquery.table-filter在这方面做得很好）