是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树。
看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题所以没有动手处理。今天闲来无事琢磨了一下这个需求。我的解决思路如下所示:
1、监听文本框的onkeyup事件;实时传递其值到某个函数;
2、编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得;
3、将匹配到的节点列表结合重新赋值给zTree且显示在文本框下方;
4、通过zTree的onClick事件实现选中节点后将其节点名称显示在文本框内。
5、当关键词变动时,及时将zTree的数据恢复至原始完整状态;这样可以保证从新从完整数据内匹配节点数据。
实际操作:
1、UI设计
提供一个文本框且设置onkeyup事件,另外设置一个div层用于放置zTree树控件;
2、zTree的基本配置
zTree的初始化数据:
zTree节点的click事件实现:
3、控制zTree树的显隐
4、初始化zTree树数据
5、实现文本框的onkeyup事件且匹配zTree树节点
这样一来就可以非常完美地实现了文本框输入关键词实时自动匹配zTree下拉效果。
另外需要引入的js和css文件为: