java+ztree仿百度搜索

先看效果图：

代码如下：

<title>Insert title here</title>
<link rel="stylesheet" href="<%=basePath%>util/zTree/css/demo.css"
type="text/css">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>util/zTree/css/zTreeStyle/zTreeStyle.css">


<script type="text/javascript"
src="<%=basePath%>util/jqEasyUI/myAdd/jquery-1.8.3.js"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.all-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.core-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.excheck-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.exedit-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.exhide-3.5.js"
type="text/javascript"></script>
<script type="text/javascript">
var zTree;
var setting = {
data: {
simpleData: {
enable: true
}
},
view: {
fontCss: getFontCss
},
callback: 
{
beforeClick: function(treeId, treeNode) 
{
//var zTree = $.fn.zTree.getZTreeObj("zTree");
$("#zTree_2_a").removeClass("curSelectedNode");
},
//新增单击回调函数
onClick: myOnClickCallback
}
};
function myOnClickCallback(event,treeId,treeNode)//菜单节点单击回调函数
{
// alert(treeNode.id);
event.preventDefault();//阻止默认点击事件
var curTime= window.parent.frames['right'].findDate();
$("#right",parent.document.body).attr("src",treeNode.url+"?id="+treeNode.id+"&&pageno=1&&pages=1&&curTime="+curTime);
$("#right",parent.document.body).load();
}
var nodeList = [], fontCss = {};
function focusKey(e) {
if (key.hasClass("empty")) {
key.removeClass("empty");
}
}
function blurKey(e) {
if (key.get(0).value === "") {
key.addClass("empty");
}
$("li[name='search']").remove();
$("#search_auto").css("display","none");
}
function searchNode(e) {
$("li[name='search']").remove();
var zTree = $.fn.zTree.getZTreeObj("zTree");
var value = $.trim(key.get(0).value);
var keyType = "name";
if (key.hasClass("empty")) {
value = "";
}
if (value === "") return;
updateNodes(false);
nodeList = zTree.getNodesByParamFuzzy(keyType, value);
if(nodeList && nodeList.length>0){  
        updateNodes(true);  
    }
for( var i=0, l=nodeList.length; i<l; i++) {
$("#show").append("<li name='search' class='search'>"+nodeList[i].name+"</li>");
}
if(nodeList.length<7){
//console.info(nodeList.length);
var ht=nodeList.length*22;
$("#search_auto").css("height",ht);
}

$("li[name='search']").click(function(){
//console.info($(this).text());
$("#key").attr("value",$(this).text());
searchNode();
});
$("#zTree_2_a").removeClass("curSelectedNode");//移除ztree选中样式
$("#search_auto").css("display","block");
}
function updateNodes(highlight) {
var zTree = $.fn.zTree.getZTreeObj("zTree");
for( var i=0, l=nodeList.length; i<l; i++) {
nodeList[i].highlight = highlight;
zTree.updateNode(nodeList[i]);
zTree.expandNode(nodeList[i], false,false , false);//自动展开折叠 
}
}
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}


var key;
$(document).ready(function(){
key = $("#key");
//console.info(key);
key.bind("focus", focusKey);
//key.bind("blur", setTimeout(blurKey, 500));
key.bind("oninput", searchNode);
key.bind("input", searchNode);
$("#key").blur(function(){
setTimeout(blurKey, 500);
});
$.ajax({
type : "post",
async : false,
url : '<%=basePath%>SalaryManageAction03.do?flag='
+ $("#flag").val(),
dataType : "json",
beforeSend : function(jqXHR, settings) {
},
success : function(data, textStatus, jqXHR) {//AJAX发送后成功执行。
zNodes = data;


$.fn.zTree.init($("#zTree"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("zTree");
zTree.expandAll(true);
$("#zTree_2_a").addClass("curSelectedNode");
return;
},
error : function(jqXHR, textStatus, errorThrown) {//AJAX发送出错执行。


alert("发生错误，请重试。");
return;
},
complete : function() {


}
});


});
</script>
<style type="text/css">
.ztree li span.button.add {
margin-left: 2px;
margin-right: 10px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle;
}
#search_auto{
display:none;
position: absolute;
background: #fff;
width: 150px;
margin: 0 0 0 50px;
box-shadow: 0 0 3px rgba(132, 130, 130, 1);
height: 150px;
overflow-x: hidden;
overflow-y: scroll;
}
.search {
    list-style: none;
    font-size: 12px;
    padding: 0 0 0 20px;
}
.search:HOVER{
background-color: #ccc;
}
</style>
</head>
<body>
名称：
<input type="text" id="key" value="" class="empty" style="background-color: #F0F6E4"/>
<div id="search_auto"><ul id="show"></ul></div>

<div class="zTreeDemoBackground left" style="width: 98%; height: 100%;">
<ul id="zTree" class="ztree"
style="width: 98%; height: 100%; overflow: hidden;"></ul>
</div>