easyui tree添加搜索框，并且监听键盘事件---实时搜索内容

前文

  需要针对easyui的tree框做搜索，但是又不想用搜索框，因为那样需要用户每次输完后点击搜索才能搜索，用户体验太差，最好还是做成input框监听键盘输入事件，这样用户每输入一个字符都能触发搜索事件。话不多说，开始代码吧！

html布局

  我是直接在存放tree的下方添加输入框，考虑到布局，添加了region来放置输入框，类型用的是easyui-textbox。

<div region="south" border="true" >
     <input id="search_tree" style="width:100%;height:100%;" type="text" class="easyui-textbox" >
</div>

  对应的绑定键盘事件如下，需要写到$(function())即入口函数里：

$('#search_tree').textbox('textbox').bind('keyup', function() {
    var tempValue = $(this).val();
    if (null != tempValue && '' != tempValue && undefined != tempValue) {
        //alert(tempValue)
        search_tree(tempValue)
    }
});

  用bind绑定keyup，判断当输入框非null时触发函数search_tree(val)，当然这之间可以用alert调试看是否正常触发。
  search_tree的实现还是非常简单的，首先我们需要获取需要搜索的tree的所有节点，然后展开对应节点，循环遍历获取每个节点的值与输入框的值判断，如果indexof存在的话，就对应的滚动到该节点，并高亮显示即可。

function search_tree(tempValue) {
    // alert(tempValue)
    var node = $("#objlist>ul").tree('getChildren');   
    console.log("node is",node)
    $("#objlist>ul").tree('expandAll', node.target);   

    //查找相应节点并滚动到该节点，高亮显示
    for (i = 0; i < node.length; i++) {
        var treeId = node[i].id;
        var treeName = node[i].text;
        console.log("treename is",treeName)
        //如果找到了，就滚动到对应的节点，并高亮显示
        if (treeName.indexOf(tempValue) >= 0) {
            var nodes = $("#objlist>ul").tree('find', treeId); 
            $("#objlist>ul").tree('scrollTo', node[i].target);     
            $("#objlist>ul").tree('select', node[i].target);   
            return
        }
    }
}

总结

  参考了网上的一些blog，用了最简单的方法实现，当然还可以监听enter事件，这样用户搜到了就可以直接进行搜索。