Jquery ztree for fuzzy search, jqueryztree

Source: Internet
Author: User

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:
  • Multi-field fuzzy search function
  • Introduction to mysql fuzzy search
  • Jquery zTree asynchronous loading simple instance sharing
  • ZTree plug-in's single-choice drop-down menu instance code
  • C # Fuzzy search example of the reflection Expression Tree
  • Simulate a fuzzy search drop-down list similar to Baidu or google
  • Jquery ztree uses json data in the drop-down tree.
  • How to obtain data from all selected nodes using the js tree plug-in zTree
  • Ztree method for obtaining the id set of child nodes of the selected node
  • Getting started with Jquery tree plug-in zTree

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.