Home > Developer > JavaScript
Jquery ztree for fuzzy search, jqueryztree
This article shares two examples of jquery ztree's fuzzy search function for your reference. The details are as follows:
In the official ztree demo code:
Search nodes based on parameters
Modify the preceding file to the following code:
<! DOCTYPE html> <HTML> <HEAD> <TITLE> ztree demo-getNodeByParam/getNodesByParam/getNodesByParamFuzzy </TITLE> <meta http-equiv = "content-type" content = "text/ html; charset = UTF-8 "> <link rel =" stylesheet "href = ".. /.. /.. /css/demo.css "type =" text/css "> <link rel =" stylesheet "href = ".. /.. /.. /css/zTreeStyle/zTreeStyle.css "type =" text/css "> <script type =" text/javascript "src = ".. /.. /.. /js/jquery-1.4.4.min.js "> </Script> <script type =" text/javascript "src = ".. /.. /.. /js/jquery. ztree. core-3.5.js & gt; </script & gt; <script type = "text/javascript" src = ".. /.. /.. /js/jquery. ztree. exhide-3.5.js> </script> <! -- <Script type = "text/javascript" src = ".. /.. /.. /js/jquery. ztree. excheck-3.5.js & gt; </script & gt; <script type = "text/javascript" src = ".. /.. /.. /js/jquery.ztree.exe dit-3.5.js "> </script> --> <SCRIPT type =" text/javascript "> var setting = {data: {key: {title:" t "}, simpleData: {enable: true }}; var zNodes = [{id: 1, pId: 0, name: "Node attribute search demo 1", t: "id = 1" },{ id: 11, pId: 1, name: "The keyword can be name", t: "id = 11" },{ id: 12, PId: 1, name: "The keyword can be level", t: "id = 12"}, {id: 13, pId: 1, name: "The keyword can be id ", t: "id = 13" },{ id: 14, pId: 1, name: "keywords can be various attributes", t: "id = 14" },{ id: 2, pId: 0, name: "Node search DEMO 2", t: "id = 2"}, {id: 21, pId: 2, name: "You can search for only one node", t: "id = 21"}, {id: 22, pId: 2, name: "You can search for a node set", t: "id = 22" },{ id: 23, pId: 2, name: "Search me", t: "id = 23" },{ id: 3, pId: 0, name: "Node search demo 3", t: "id = 3" },{ id: 31, pId: 3, name: "My id is: 31 ", t: "id = 31"}, {I D: 32, pId: 31, name: "My id is: 32", t: "id = 32"}, {id: 33, pId: 32, name: "My id is: 33", t: "id = 33"}]; function focusKey (e) {if (key. hasClass ("empty") {key. removeClass ("empty") ;}} function blurKey (e) {if (key. get (0 ). value = "") {key. addClass ("empty") ;}} var lastValue = "", nodeList = [], fontCss ={}; function clickRadio (e) {lastValue = ""; searchNode (e);} function searchNode (e) {var zTree = $. Fn. zTree. getZTreeObj ("treeDemo"); if (! $ ("# GetNodesByFilter "). attr ("checked") {var value = $. trim (key. get (0 ). value); var keyType = ""; if ($ ("# name "). attr ("checked") {keyType = "name";} else if ($ ("# level "). attr ("checked") {keyType = "level"; value = parseInt (value);} else if ($ ("# id "). attr ("checked") {keyType = "id"; value = parseInt (value);} if (key. hasClass ("empty") {value = "";} if (lastValue = value) return; lastVal Ue = value; if (value = "") {zTree. showNodes (zTree. transformToArray (zTree. getNodes (); return;} if ($ ("# getNodeByParam "). attr ("checked") {var node = zTree. getNodeByParam (keyType, value); if (node = null) {nodeList = [];} else {nodeList = [node];} else if ($ ("# getNodesByParam "). attr ("checked") {nodeList = zTree. getNodesByParam (keyType, value);} else if ($ ("# getNodesByParamFuzzy "). Attr ("checked") {nodeList = zTree. getNodesByParamFuzzy (keyType, value) ;}} else {updateNodes (false); nodeList = zTree. getNodesByFilter (filter);}/** do not query the parent-level for (var x = 0; x <nodeList. length; x ++) {if (nodeList [x]. isParent) {nodeList. splice (x --, 1) ;}} */nodeList = zTree. transformToArray (nodeList); updateNodes (true);} function updateNodes (highlight) {var zTree = $. fn. zTree. getZTreeObj ("treeD Emo "); var allNode = zTree. transformToArray (zTree. getNodes (); zTree. hideNodes (allNode); for (var n in nodeList) {findParent (zTree, nodeList [n]);} zTree. showNodes (nodeList);} function findParent (zTree, node) {zTree. expandNode (node, true, false, false); var pNode = node. getParentNode (); if (pNode! = Null) {nodeList. push (pNode); findParent (zTree, pNode) ;}} function getFontCss (treeId, treeNode) {return (!! TreeNode. highlight )? {Color: "# A60000", "font-weight": "bold" }:{ color: "#333", "font-weight": "normal "};} function filter (node) {return! Node. isParent & node. isFirstNode;} var key; $ (document ). ready (function () {$. fn. zTree. init ($ ("# treeDemo"), setting, zNodes); key = $ ("# key"); key. bind ("focus", focusKey ). bind ("blur", blurKey ). bind ("propertychange", searchNode ). bind ("input", searchNode); $ ("# name "). bind ("change", clickRadio); $ ("# level "). bind ("change", clickRadio); $ ("# id "). bind ("change", clickRadio); $ ("# getNodeByParam "). bind ("change", clickRadio); $ ("# getNodesByParam "). bind ("change", clickRadio); $ ("# getNodesByParamFuzzy "). bind ("change", clickRadio); $ ("# getNodesByFilter "). bind ("change", clickRadio );}); </SCRIPT> </HEAD> <BODY>
In this way, the fuzzy search display function is implemented.
The second Ztree tree fuzzy search implementation method is as follows:
Function expand_ztree (treeId) {var treeObj = $. fn. zTree. getZTreeObj (treeId); treeObj. expandAll (true);} function close_ztree (treeId) {var treeObj = $. fn. zTree. getZTreeObj (treeId); var nodes = treeObj. transformToArray (treeObj. getNodes (); var nodeLength = nodes. length; for (var I = 0; I <nodeLength; I ++) {if (nodes [I]. id = '0') {// root node: Expand treeObj. expandNode (nodes [I], true, true, false);} else {// Non-root node: Collapse treeObj. expandNode (nodes [I], false, true, false) ;}} function search_ztree (treeId, searchConditionId) {searchByFlag_ztree (treeId, searchConditionId ,"");} function searchByFlag_ztree (treeId, searchConditionId, flag) {// <1>. search Condition var searchCondition = $ ('#' + searchConditionId ). val (); // <2>. get the node Array set var highlightNodes = new Array (); if (searchCondition! = "") {Var treeObj = $. fn. zTree. getZTreeObj (treeId); highlightNodes = treeObj. getNodesByParamFuzzy ("name", searchCondition, null);} // <3>. highlight and display [specified node s] highlightAndExpand_ztree (treeId, highlightNodes, flag);} function highlightAndExpand_ztree (treeId, highlightNodes, flag) {var treeObj = $. fn. zTree. getZTreeObj (treeId); // <1>. update all nodes to the common style var treeNodes = treeObj. transformToArray (treeObj. getNode S (); for (var I = 0; I <treeNodes. length; I ++) {treeNodes [I]. highlight = false; treeObj. updateNode (treeNodes [I]);} // <2>. collapse the tree and only expand the close_ztree (treeId) of the first-level node under the root node; // <3>. update the style of the specified node to highlighted, and expand if (highlightNodes! = Null) {for (var I = 0; I
The above is the code for implementing the fuzzy search function using jquery ztree. I hope it will be helpful for your learning.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
