【ztree防百度云】zTree防百度下拉框实现输入关键词自动匹配结果

更新时间:2019-06-25    来源:php常用代码    手机版     字体:

【www.bbyears.com--php常用代码】

效果如下图所示

 

zTree防百度下拉框实现输入关键词自动匹配结果


思路很简单,就是循环所有ztree节点数据,然后创建树。

 

 代码如下

//Ztree的初始数据
var zNodes = [
{ id: 1, pId: 0, name: "匹配" },
{ id: 2, pId: 0, name: "匹配2" },
{ id: 3, pId: 0, name: "匹配4343" },
{ id: 6, pId: 0, name: "匹配444" },
{ id: 4, pId: 0, name: "河北省", open: true },
{ id: 41, pId: 4, name: "石家庄" },
{ id: 42, pId: 4, name: "保定" },
{ id: 43, pId: 4, name: "邯郸" },
{ id: 44, pId: 4, name: "承德" },
{ id: 5, pId: 0, name: "广东省", open: true },
{ id: 51, pId: 5, name: "广州" },
{ id: 52, pId: 5, name: "深圳" },
{ id: 53, pId: 5, name: "东莞" },
{ id: 54, pId: 5, name: "佛山" },
{ id: 6, pId: 0, name: "福建省", open: true },
{ id: 61, pId: 6, name: "福州" },
{ id: 62, pId: 6, name: "厦门" },
{ id: 63, pId: 6, name: "泉州" },
{ id: 64, pId: 6, name: "三明" }
];

 //点击某个节点 然后将该节点的名称赋值值文本框
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//获得选中的节点
var nodes = zTree.getSelectedNodes(),
v = "";
//根据id排序
nodes.sort(function compare(a, b) { return a.id - b.id; });
for (var i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
}
//将选中节点的名称显示在文本框内
if (v.length > 0) v = v.substring(0, v.length - 1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
//隐藏zTree
hideMenu();
return false;
}
//显示树
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
}
//隐藏树
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
//还原zTree的初始数据
function InitialZtree() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
function AutoMatch(txtObj) {
if (txtObj.value.length > 0) {
InitialZtree();
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value, false);
var nodeArr = new Array();
//这里之所以做处理是为了避免父节点模糊匹配出的数据会自动带入旗下所有子节点
for (var i = 0; i < nodeList.length; i++) {
var obj = new Object();
obj.id = nodeList[i].id;
obj.pId = nodeList[i].pId;
obj.name = nodeList[i].name;
nodeArr.push(obj);
}
//将找到的nodelist节点更新至Ztree内
$.fn.zTree.init($("#treeDemo"), setting, nodeArr);
showMenu();
} else {
//隐藏树
hideMenu();
InitialZtree();

}

本文来源:http://www.bbyears.com/jiaocheng/55220.html