要实现的功能截图：
要求：
1、点击输入框可以根据拼音自动筛选数据，并且标记已经选择的数据，没有结果的时候提示，相应的更新左边树状态
2、勾选树右侧树的复选框左侧出现相应的内容
我用到的插件
vue+chosen+ztree
vue：组件化的MVVM库
chosen:单选列表和多选列表增强
ztree：基于jquery的树插件
分析
chosen插件已经可以实现1中的大部分效果，我们只需要预先获取数据，实现左右两侧一 一对应，最后点击发送获取最终的数据集合ID
具体实现
chosen需要的html结构
标签即可，该select默认隐藏，chosen依据该数据构建新的html结构
//chosen初始化
$(function(){
$('.dept_select').chosen({
no_results_text:'没有结果',allow_single_deselect:true
});
});
这样要求1中的大部分效果就实现了，因为我们的数据是从后台获取的，因此我们需要从后台获取select的option的值，这里采用vue解析数据，相应的html结构和js为：
然后出现了下面的效果：
接下来我们要做的就是选择人员右边相应的人员选中，chosen提供了一个change方法，该方法当选择的值发生改变时触发，有这个方法我们就很容易根据select值的变化来触发事件
用户改变了选择，快快处理
});
我们同样要写到Vue.nextTick中
显示的提示文本
search_contains: true //从任意位置开始检索
});
$('#zmail-select').on('change',function(){
//用户改变了值之后作如下处理
var treeObj = $.fn.zTree.getZTreeObj("zmail-tree");
treeObj.expandAll(true);//展开所有树节点
treeObj.checkAllNodes(false);//清空所有树节点
$("#zmail-select option:selected").each(function(i,obj){
var node = treeObj.getNodeByParam("id",obj.value,null);
treeObj.checkNode(node,true,true);
});
});
});
//输入框的值只要发生了改变我们就获取树的目标id，展开所有子节点，并且清空树的所有选中状态，因为输入框中的值不止一个因此我们要做一个循环，使用ztree的方法getNodeByParam（根据给定的参数查找节点）和checkNode（控制对应节点的选中或者非选中操作）
到这选取输入框数值让右侧树种对应的人员选中就实现了，下面来实现勾选右侧树中的人员来改变输入框中的数据
不显示数据
-
//树初始化代码js
//人员树基本设置
var zmailTreeSet={
view:{
dblClickExpand:false
},async:{
enable:true,type:'get',url:'服务器数据地址',},data:{
simpleData:{
enable:true,idKey:'id',pIdKey:'parentId'
},key:{
children:'userList'
}
},check:{
enable:true,chkBoxType:{'Y':'s','N':'s'}
},callback:{
onCheck:zmailCheck
}
};
function zmailCheck(){
//这里处理输入框的数据
}
//初始化人员树
$.fn.zTree.init($('#zmail-tree'),zmailTreeSet);
实现的思路：
（1）首先获取点击复选框的节点，
（2）其次清空select中的选中状态，将其恢复到初始状态，
（3）根据勾选的节点数量循环使select中的相应option选中，此处判断的关键是数据id
属性为空说明不是父节点，存取它的值，如果不为空则跳过
//不写判断，直接使用勾选的树的数据的ID来进行选择，使其属性select改为selected
$("#zmail-select option[value="+zmaNodes[i].id+"]")[0].selected='selected';
}
}
（4）更新select option列表
以上所述是小编给大家介绍的基于chosen插件实现人员选择树搜索自动筛选功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/45611.html