是否可以借助于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文件为:
以上就是本篇文章【转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果】的全部内容了,欢迎阅览 ! 文章地址:http://mip.xhstdz.com/news/1594.html
栏目首页
相关文章
动态
同类文章
热门文章
网站地图
返回首页 物流园资讯移动站 http://mip.xhstdz.com/mobile/ , 查看更多