在做机场项目的时候，业务为一个input框，点击的时候出现一个下拉树，这个下拉树是所有的设备，由于设备太多，加上分了区域，为了更好的用户体验，设计一个模糊搜索的功能，方便用户进行选择

具体实现过程如下：

第一步：ui设计  一个input输入框，用于输入用，下方一个div或者是一个ul用于ztree树用

<ul class="list">

    <li class="title">&nbsp;&nbsp;城市：<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)"

        style="width: 120px;" />

    </li>

</ul>

<div id="menuContent" class="menuContent" style="display: none; position: absolute;">

        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">

        </ul>

</div>

第二步：监听键盘弹起事件，获取input里面的内容，用ztree提供的api（也可以自己写方法），匹配到符合条件的ztree树，然后重构一次下拉树

///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找

function AutoMatch(txtObj) {

    if (txtObj.value.length > 0) {

        InitialZtree();

        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

        var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);

        //将找到的nodelist节点更新至Ztree内

        $.fn.zTree.init($("#treeDemo"), setting, nodeList);

        showMenu();

    } else {

        //隐藏树

        //hideMenu();

        InitialZtree();

    }

}

第三步：树子节点的点击事件，将点击的内容填充input输入框

//点击某个节点 然后将该节点的名称赋值值文本框

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++) {

        if(i!==0){

            v +=","+nodes[i].name ;

        }

        v +=nodes[i].name;

    }

    //将选中节点的名称显示在文本框内

    var cityObj = $("#citySel");

    cityObj.attr("value", v);

    //隐藏zTree

    hideMenu();

    return false;

}

完整代码：

<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO - Simple Data</TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

    <style type="text/css">

    ul,li{margin:0;padding:0}

    li{list-style:none}

    ul.list,#menuContent{width:183px;border:1px solid #ddd;}

    </style>

 </HEAD>

<BODY>

<h1>最简单的树 -- 简单 JSON 数据</h1>

<h6>[ 文件路径: core/simpleData.html ]</h6>

<ul class="list">

    <li class="title">&nbsp;&nbsp;城市：<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)"

        style="width: 120px;" />

    </li>

</ul>

<div id="menuContent" class="menuContent" style="display: none; position: absolute;">

        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">

        </ul>

</div>

    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>

      <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->

    <SCRIPT type="text/javascript">

var setting = {

    view: {

        selectedMulti: false //是否允许多选

    },

    data: {

        simpleData: {

            enable: true

        }

    },

    callback: {

        //zTree节点的点击事件

        onClick: onClick

    }

};

//Ztree的初始数据

var zNodes = [

    { id: 1, pId: 0, name: "北京" },

    { id: 2, pId: 0, name: "天津" },

    { id: 3, pId: 0, name: "上海" },

    { id: 6, pId: 0, name: "重庆" },

    { 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: "三明" }

 ];

$(document).ready(function(){

    $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    initEvent();

    hideMenu();

});

//点击某个节点 然后将该节点的名称赋值值文本框

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++) {

        if(i!==0){

            v +=","+nodes[i].name ;

        }

        v +=nodes[i].name;

    }

    //将选中节点的名称显示在文本框内

    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");

    $("#menuContent").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);

        //将找到的nodelist节点更新至Ztree内

        $.fn.zTree.init($("#treeDemo"), setting, nodeList);

        showMenu();

    } else {

        //隐藏树

        //hideMenu();

        InitialZtree();

    }

}

function initEvent(){

    //鼠标获得焦点的时候，显示所有的树

    $("#citySel").focus(function(){

        $("#citySel").css("background-color","#FFFFCC");

        showMenu();

    });

    //鼠标失去焦点的时候，隐藏

/*    $("#citySel").blur(function(){

        $("#citySel").css("background-color","#fff");

        hideMenu();

    });*/

}

    </SCRIPT>

</BODY>

</HTML>

案例二：

充电桩项目代码  estationMain.js

    //注：groupName为输入框，stationCon为下面显示的div树

    //点击输入框

    $('#groupName').on('click',function(){

        var stationObj = $("#groupName");

        var stationOffset = $("#groupName").offset();

        $("#stationCon").css({left:stationOffset.left + "px", top:stationOffset.top + stationObj.outerHeight() + "px"}).slideDown("fast"); //对齐

        $("body").bind("mousedown", onBodyDown); //为body绑定事件

    })

    function hideStation() {

        $("#stationCon").fadeOut("fast");

        $("body").unbind("mousedown", onBodyDown);

    }

    function onBodyDown(event) {

        //判断只要点击的目标对象不是树自己就隐藏，同时解除事件绑定

        if (!(event.target.id == "menuBtn" || event.target.id == "stationCon" || $(event.target).parents("#stationCon").length>0)) {

            hideStation();

        }

    }

    $.fn.zTree.init($("#tree"), setting, zNodes);

ztree树的模糊搜索功能的更多相关文章

  1. zTree树的模糊搜索

    工作需要,所以做了一个比较方便的搜索功能:1.功能实现都是基于zTree的API:2.如有更好的建议,欢迎拍我:其中要说明下的是flag 这个字段, 这是我自己定义的扩展字段,代码中涉及到flag 请 ...

  2. ztree 树的模糊搜索

    (转载),有个坑记录下: (原文)实现类似下面这种: /** * 展开树 * @param treeId */ function expand_ztree(treeId) { var treeObj ...

  3. Ztree树增删改查菜单，遇到的问题总结

    一.引言 我今天做了一个Ztree树增删改查菜单的功能.其中遇到了很多坑爹的问题,和大家讲述一下. 二.代码展示 1.Ztree树前台代码 <%@ page language="jav ...

  4. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  5. Jquery插件 之 zTree树加载

    原文链接:https://blog.csdn.net/jiaqu2177/article/details/80626730 zTree树加载 zTree 是一个依靠 jQuery 实现的多功能 “树插 ...

  6. Rafy 领域实体框架 - 树型实体功能（自关联表）

      在 Rafy 领域实体框架中,对自关联的实体结构做了特殊的处理,下面对这一功能进行讲解. 场景 在开发数据库应用程序时,往往会遇到自关联表的场景.例如,分类信息.组织架构中的部门.文件夹信息等,都 ...

  7. ztree树 叶子节点路径的集合

    1.Question Description: ztree树各个节点都带有路径,如“/根节点”,"/根节点/一级节点",“根节点/一级节点/二级节点‘; 现在想获取所选的最末级节点 ...

  8. MVC4加载zTree树小控件

    前言: 第一次学习使用MVC框架,找了个练手项目,加载zTree树小控件.下面我就一步步说明我这次练手的经历以记录.如果有什么错误,希望各位大神帮忙指正,谢谢. 第一步: 利用VS2010新建一个MV ...

  9. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

随机推荐

  1. NET分页实现及代码

    最近在写一个关于NET的框架,写到后面果不其然的就遇到了分页,自己看了很多关于分页的并自己结合写了一个,晒出来和大家分享一下,第一次写博客望大家多多提意见啦... cs文件分页代码: Paging p ...

  2. [C#]合并单元格(行、列)

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...

  3. C# Log4.Net日志组件的应用系列（一）

    引言 Log4Net应该可以说是.NET中最流行的开源日志组件了.在各种项目框架中可以说是必不可少的组成部分.个人认为Log4Net有下面几个优点: 1. 使用灵活,它可以将日志分不同的等级,以不同的 ...

  4. centos 查看mysql数据库命令

    使用MySQL时,需要了解当前数据库的情况,例如当前的数据库大小.字符集.用户等等.下面总结了一些查看数据库相关信息的命令 1:查看显示所有数据库 mysql> show databases; ...

  5. “全栈2019”Java第七十六章：静态、非静态内部类访问权限

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. Linux系统如何迁移至LVM磁盘

    今天遇到一个问题,算是比较严重的把.就是要把当前系统转移到 LVM 卷里面去,下面有一些发生过程介绍. 不感兴趣可以直接跳过,看实战部分<如何迁移系统至LVM卷> 朋友今天突然找我,说是要 ...

  7. mysql 快照读MVCC

    mysql的读分快照读和当前读 快照读 是指写的同时,读不阻塞,达到并发的作用 这时候的读 是 记录的历史版本,存在于undo里,当然回滚时就的也是这个undo 当执行一条update语句时,记录本身 ...

  8. 「美团 CodeM 复赛」城市网络

    题目链接 题意分析 首先 \([u,v]\)在树上是一条深度递增的链 那么我们可以使用倍增找 \(x\)的祖先当中深度最大的值大于\(x\)的点 然后维护一个\(pre\) 重新建树 这样从\(x\) ...

  9. 子元素margin-top为何会影响父元素？

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  10. 2D激光SLAM算法比较+cartographer

    Hector slam: Hector slam利用高斯牛顿方法解决scan-matching问题,对传感器要求较高. 缺点:需要雷达(LRS)的更新频率较高,测量噪声小.所以在制图过程中,需要rob ...