Question

在网页设计中，如何对用js做的树状导航进行搜索

最近在网页设计时，用js做了一个树状导航，但是因为导航中内容较多，想加入对导航内容的搜索，做成像chm那样的形式，如何做？

Answer 1

跟JS画出树形菜单一样，先找到root节点，然后循环root下的子菜单，如果子菜单下还有子菜单，则递归循环。

如：查询某个节点的名字（全字符匹配）：
var root = document.getElementById("root");
getInnerText(roow);
function getInnerText(node, text){
var flag = false;

var cnodes = node.chindren;

var i = 0, len = cnodes.length;

var nowNode = null;

while(i < len){
nowNode = cnodes[i];

var hasChild = (nowNode.children.length > 0 ? true : false);
if(hasChild){

flag = getInnerText(nowNode, text);
}else{

if(nowNode.innerText === text){

flag = true;

/*找到需要的文字后要做的事情*/

break;

}

}
}

return flag;

}

如果需要做模糊匹配，nowNode.innerText === text修改成nowNode.innerText.indexOf(text) > -1就可以了。
如果需要显示所有模糊匹配的结果，那就去掉flag返回以及break跳出就行了。

追问

js不懂，树状图也是从网站http://www.jyeoo.com/math/ques/search拷过来的，能否给出详细的代码？谢谢啦

追答

你需要做成什么样子？CHM那样的模糊查询，然后列举出匹配的项？还是其他什么样子。

追问

输入树状结构中的某个知识点，菜单自动展开到那一项，最好是模糊查询，查询到的词都有颜色，可以实现吗？

追答

/**
* @param node 当前的节点
* @param text 需要匹配的文字
*如果只需要显示查找到的第一个，则去掉下面方法中的注释
*/
function getInnerText(node, text){
   //var flag = false;
   var cnodes = node.chindren;
   var i = 0, len = cnodes.length;
   var nowNode = null;
   while(i < len){
       nowNode = cnodes[i];
       var hasChild = (nowNode.children.length > 0 ? true : false);
       if(hasChild){
           //flag = getInnerText(nowNode, text); //如果只需要显示匹配的第一个，则放开这一段，注释下面一段。
           getInnerText(nowNode, text);
       }else{
           if(nowNode.innerText.indexOf(text) > -1){
               //flag = true;
               var parentDom = nowNode.parentNode;
               var nowChildNode = parentDom.children[2];
               nowChildNode.style.display = "block";
               //break;
           }
       }
       //if(flag){
       //    break;
       //}
   }
   //return flag;
}

拿去试试看

Answer 2

最简单的方法就是用jquery
首先用jquery取得所有的文本内容,搜索的时候用jquery匹配,匹配成功之後反色即可,根本就不需要考虑你的tree有多少节点,那样太复杂了.

追问

可以给出具体代码吗？

Answer 3

搜索和树没必要扯到一起，可以把树的元数据存在数据库里，就可以方便搜索了。