Bootstrap Tree View doesnt search properly. I am searching for 954116679 (FSP) but it returns 0 matches found

[asifakhtar]

I am using Bootstrap Tree View whose URL is https://github.com/jonmiles/bootstrap-treeview?tab=readme-ov-file

var globalFinalArray = [
  {
    "text": "<b>Name:</b> Allied Media Projects, Inc., <b>EIN:</b> 010559608, <b>Aka:</b> AMP, <b>COI Workflow:</b> , <b>Categories:</b> Non-Profit Organization",
    "href": "#Allied Media Projects, Inc.",
    "tags": [
      1
    ],
    "nodes": [
      {
        "text": "<b>Name:</b> Decolonizing Wealth Project, <b>EIN:</b> 010559608 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Board Approval, <b>Categories:</b> Fiscally Sponsored Project,Non-Profit Organization",
        "href": "#Decolonizing Wealth Project",
        "tags": [
          0
        ]
      }
    ]
  },
  {
    "text": "<b>Name:</b> Northern California Grantmakers, <b>EIN:</b> 942761355, <b>Aka:</b> NCG, <b>COI Workflow:</b> Board Approval, <b>Categories:</b> Non-Profit Organization",
    "href": "#Northern California Grantmakers",
    "tags": [
      1
    ],
    "nodes": [
      {
        "text": "<b>Name:</b> California Criminal Justice Funders Group, <b>EIN:</b> 942761355 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Independent Review Committee (IRC), Board Notification, Board Approval, <b>Categories:</b> Fiscally Sponsored Project",
        "href": "#California Criminal Justice Funders Group",
        "tags": [
          0
        ]
      }
    ]
  },
  {
    "text": "<b>Name:</b> Richmond Community Foundation, <b>EIN:</b> 943337754, <b>Aka:</b> RCF Connects; fka: Richmond Children's Foundation, <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Independent Review Committee (IRC), Board Notification, Board Approval, <b>Categories:</b> Non-Profit Organization",
    "href": "#Richmond Community Foundation",
    "tags": [
      2
    ],
    "nodes": [
      {
        "text": "<b>Name:</b> Healthy Contra Costa, <b>EIN:</b> 943337754 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project",
        "href": "#Healthy Contra Costa",
        "tags": [
          0
        ]
      },
      {
        "text": "<b>Name:</b> Reimagine Richmond, <b>EIN:</b> 943337754 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Independent Review Committee (IRC), Board Notification, <b>Categories:</b> Fiscally Sponsored Project",
        "href": "#Reimagine Richmond",
        "tags": [
          0
        ]
      }
    ]
  },
  {
    "text": "<b>Name:</b> Social and Environmental Entrepreneurs, Inc., <b>EIN:</b> 954116679, <b>Aka:</b> Social & Environmental Entrepreneurs, SEE, <b>COI Workflow:</b> Independent Review Committee (IRC), <b>Categories:</b> Non-Profit Organization",
    "href": "#Social and Environmental Entrepreneurs, Inc.",
    "tags": [
      3
    ],
    "nodes": [
      {
        "text": "<b>Name:</b> Boyle Heights Beat, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Board Notification, <b>Categories:</b> Fiscally Sponsored Project",
        "href": "#Boyle Heights Beat",
        "tags": [
          0
        ]
      },
      {
        "text": "<b>Name:</b> Brown Issues, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Board Approval, <b>Categories:</b> Fiscally Sponsored Project",
        "href": "#Brown Issues",
        "tags": [
          0
        ]
      },
      {
        "text": "<b>Name:</b> Funders for Justice, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project",
        "href": "#Funders for Justice",
        "tags": [
          0
        ]
      }
    ]
  },
  {
    "text": "<b>Name:</b> WHITTIER PRIDE, <b>EIN:</b> 871604434, <b>Aka:</b> , <b>COI Workflow:</b> , <b>Categories:</b> Non-Profit Organization",
    "href": "#WHITTIER PRIDE",
    "tags": [
      1
    ],
    "nodes": [
      {
        "text": "<b>Name:</b> Midnight Books Inc., <b>EIN:</b> 871604434 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project",
        "href": "#Midnight Books Inc.",
        "tags": [
          0
        ]
      }
    ]
  }
]

        function displayTree() {
            try
            {
                var $searchableTree = $('#organizationsTree').treeview({data:globalFinalArray,levels:100,expandIcon:'fas fa-plus-square',collapseIcon:'fas fa-minus-square',nodeIcon:'',selectedIcon:'',checkedIcon:'fas fa-check-square',uncheckedIcon:'fas fa-check-square',color:undefined,backColor:undefined,borderColor:undefined,onhoverColor:'#F5F5F5',selectedColor:'#FFFFFF',selectedBackColor:'#428bca',searchResultColor:'#D9534F',searchResultBackColor:undefined,enableLinks:false,highlightSelected:true,highlightSearchResults:true,showBorder:true,showIcon:true,showCheckbox:false,showTags:true,multiSelect:false});
                
                var search = function(e) {
                    var pattern = $('#input-search').val();
                    var options = {
                        ignoreCase: true,     // case insensitive
                        exactMatch: false,    // like or equals
                        revealResults: true,  // reveal matching nodes
                    };
                    var results = $searchableTree.treeview('search', [ pattern, options ]);

                    var output = '<p>' + results.length + ' matches found.</p>';
                    $.each(results, function (index, result) {
                        output += `<p>${index + 1} - ${result.text} </p>`;
                    });
                    $('#search-output').html(output);
                }

                $('#btn-search').on('click', search);
                $('#input-search').on('keyup', search);

                $('#btn-clear-search').on('click', function (e) {
                    $searchableTree.treeview('clearSearch');
                    $('#input-search').val('');
                    $('#search-output').html('');
                });

                $(".interface").show();
            }
            catch (ex)
            {
                alert("Error in displayTree(): " + ex.toString());
                return false;
            }
        }

//Generated HTMl
<div id="organizationsTree" class="treeview"><ul class="list-group"><li class="list-group-item node-organizationsTree" data-nodeid="0" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fas fa-minus-square"></span><span class="icon node-icon"></span><b>Name:</b> Allied Media Projects, Inc., <b>EIN:</b> 010559608, <b>Aka:</b> AMP, <b>COI Workflow:</b> , <b>Categories:</b> Non-Profit Organization<span class="badge">1</span></li><li class="list-group-item node-organizationsTree" data-nodeid="1" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><b>Name:</b> Decolonizing Wealth Project, <b>EIN:</b> 010559608 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Board Approval, <b>Categories:</b> Fiscally Sponsored Project,Non-Profit Organization<span class="badge">0</span></li><li class="list-group-item node-organizationsTree" data-nodeid="2" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fas fa-minus-square"></span><span class="icon node-icon"></span><b>Name:</b> Northern California Grantmakers, <b>EIN:</b> 942761355, <b>Aka:</b> NCG, <b>COI Workflow:</b> Board Approval, <b>Categories:</b> Non-Profit Organization<span class="badge">1</span></li><li class="list-group-item node-organizationsTree" data-nodeid="3" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><b>Name:</b> California Criminal Justice Funders Group, <b>EIN:</b> 942761355 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Independent Review Committee (IRC), Board Notification, Board Approval, <b>Categories:</b> Fiscally Sponsored Project<span class="badge">0</span></li><li class="list-group-item node-organizationsTree" data-nodeid="4" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fas fa-minus-square"></span><span class="icon node-icon"></span><b>Name:</b> Richmond Community Foundation, <b>EIN:</b> 943337754, <b>Aka:</b> RCF Connects; fka: Richmond Children's Foundation, <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Independent Review Committee (IRC), Board Notification, Board Approval, <b>Categories:</b> Non-Profit Organization<span class="badge">2</span></li><li class="list-group-item node-organizationsTree" data-nodeid="5" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><b>Name:</b> Healthy Contra Costa, <b>EIN:</b> 943337754 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project<span class="badge">0</span></li><li class="list-group-item node-organizationsTree" data-nodeid="6" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><b>Name:</b> Reimagine Richmond, <b>EIN:</b> 943337754 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Independent Review Committee (IRC), Board Notification, <b>Categories:</b> Fiscally Sponsored Project<span class="badge">0</span></li><li class="list-group-item node-organizationsTree" data-nodeid="7" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fas fa-minus-square"></span><span class="icon node-icon"></span><b>Name:</b> Social and Environmental Entrepreneurs, Inc., <b>EIN:</b> 954116679, <b>Aka:</b> Social &amp; Environmental Entrepreneurs, SEE, <b>COI Workflow:</b> Independent Review Committee (IRC), <b>Categories:</b> Non-Profit Organization<span class="badge">3</span></li><li class="list-group-item node-organizationsTree" data-nodeid="8" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><b>Name:</b> Boyle Heights Beat, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Board Notification, <b>Categories:</b> Fiscally Sponsored Project<span class="badge">0</span></li><li class="list-group-item node-organizationsTree" data-nodeid="9" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><b>Name:</b> Brown Issues, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Board Approval, <b>Categories:</b> Fiscally Sponsored Project<span class="badge">0</span></li><li class="list-group-item node-organizationsTree" data-nodeid="10" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><b>Name:</b> Funders for Justice, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project<span class="badge">0</span></li><li class="list-group-item node-organizationsTree" data-nodeid="11" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fas fa-minus-square"></span><span class="icon node-icon"></span><b>Name:</b> WHITTIER PRIDE, <b>EIN:</b> 871604434, <b>Aka:</b> , <b>COI Workflow:</b> , <b>Categories:</b> Non-Profit Organization<span class="badge">1</span></li><li class="list-group-item node-organizationsTree" data-nodeid="12" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><b>Name:</b> Midnight Books Inc., <b>EIN:</b> 871604434 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project<span class="badge">0</span></li></ul></div>

 

[VBService]

IMO the problem is with characters like ( and ) escape those special characters for search (regex) should resolve this problem.

var pattern = $('#input-search').val();
var escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

full code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Organizations Tree View</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include Bootstrap Treeview CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
    <!-- Include Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
      .interface {
        display: none;
        margin-top: 20px;
      }
      #search-output {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="organizationsTree" class="treeview"></div>
   
      <div class="interface">
        <input type="text" id="input-search" placeholder="Search...">
        <button id="btn-search">Search</button>
        <button id="btn-clear-search">Clear Search</button>
        <div id="search-output"></div>
      </div>
    </div>

    <script>
      var globalFinalArray = [
        {
          "text": "<b>Name:</b> Allied Media Projects, Inc., <b>EIN:</b> 010559608, <b>Aka:</b> AMP, <b>COI Workflow:</b> , <b>Categories:</b> Non-Profit Organization",
          "href": "#Allied Media Projects, Inc.",
          "tags": [
            1
          ],
          "nodes": [
            {
              "text": "<b>Name:</b> Decolonizing Wealth Project, <b>EIN:</b> 010559608 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Board Approval, <b>Categories:</b> Fiscally Sponsored Project,Non-Profit Organization",
              "href": "#Decolonizing Wealth Project",
              "tags": [
                0
              ]
            }
          ]
        },
        {
          "text": "<b>Name:</b> Northern California Grantmakers, <b>EIN:</b> 942761355, <b>Aka:</b> NCG, <b>COI Workflow:</b> Board Approval, <b>Categories:</b> Non-Profit Organization",
          "href": "#Northern California Grantmakers",
          "tags": [
            1
          ],
          "nodes": [
            {
              "text": "<b>Name:</b> California Criminal Justice Funders Group, <b>EIN:</b> 942761355 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Independent Review Committee (IRC), Board Notification, Board Approval, <b>Categories:</b> Fiscally Sponsored Project",
              "href": "#California Criminal Justice Funders Group",
              "tags": [
                0
              ]
            }
          ]
        },
        {
          "text": "<b>Name:</b> Richmond Community Foundation, <b>EIN:</b> 943337754, <b>Aka:</b> RCF Connects; fka: Richmond Children's Foundation, <b>COI Workflow:</b> Executive Team Review Committee (ETRC), Independent Review Committee (IRC), Board Notification, Board Approval, <b>Categories:</b> Non-Profit Organization",
          "href": "#Richmond Community Foundation",
          "tags": [
            2
          ],
          "nodes": [
            {
              "text": "<b>Name:</b> Healthy Contra Costa, <b>EIN:</b> 943337754 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project",
              "href": "#Healthy Contra Costa",
              "tags": [
                0
              ]
            },
            {
              "text": "<b>Name:</b> Reimagine Richmond, <b>EIN:</b> 943337754 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Independent Review Committee (IRC), Board Notification, <b>Categories:</b> Fiscally Sponsored Project",
              "href": "#Reimagine Richmond",
              "tags": [
                0
              ]
            }
          ]
        },
        {
          "text": "<b>Name:</b> Social and Environmental Entrepreneurs, Inc., <b>EIN:</b> 954116679, <b>Aka:</b> Social & Environmental Entrepreneurs, SEE, <b>COI Workflow:</b> Independent Review Committee (IRC), <b>Categories:</b> Non-Profit Organization",
          "href": "#Social and Environmental Entrepreneurs, Inc.",
          "tags": [
            3
          ],
          "nodes": [
            {
              "text": "<b>Name:</b> Boyle Heights Beat, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Board Notification, <b>Categories:</b> Fiscally Sponsored Project",
              "href": "#Boyle Heights Beat",
              "tags": [
                0
              ]
            },
            {
              "text": "<b>Name:</b> Brown Issues, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Board Approval, <b>Categories:</b> Fiscally Sponsored Project",
              "href": "#Brown Issues",
              "tags": [
                0
              ]
            },
            {
              "text": "<b>Name:</b> Funders for Justice, <b>EIN:</b> 954116679 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project",
              "href": "#Funders for Justice",
              "tags": [
                0
              ]
            }
          ]
        },
        {
          "text": "<b>Name:</b> WHITTIER PRIDE, <b>EIN:</b> 871604434, <b>Aka:</b> , <b>COI Workflow:</b> , <b>Categories:</b> Non-Profit Organization",
          "href": "#WHITTIER PRIDE",
          "tags": [
            1
          ],
          "nodes": [
            {
              "text": "<b>Name:</b> Midnight Books Inc., <b>EIN:</b> 871604434 (FSP), <b>Aka:</b> , <b>COI Workflow:</b> Executive Team Review Committee (ETRC), <b>Categories:</b> Fiscally Sponsored Project",
              "href": "#Midnight Books Inc.",
              "tags": [
                0
              ]
            }
          ]
        }
      ];

      function displayTree() {
        try
        {
          var $searchableTree = $('#organizationsTree').treeview({data:globalFinalArray,levels:100,expandIcon:'fas fa-plus-square',collapseIcon:'fas fa-minus-square',nodeIcon:'',selectedIcon:'',checkedIcon:'fas fa-check-square',uncheckedIcon:'fas fa-check-square',color:undefined,backColor:undefined,borderColor:undefined,onhoverColor:'#F5F5F5',selectedColor:'#FFFFFF',selectedBackColor:'#428bca',searchResultColor:'#D9534F',searchResultBackColor:undefined,enableLinks:false,highlightSelected:true,highlightSearchResults:true,showBorder:true,showIcon:true,showCheckbox:false,showTags:true,multiSelect:false});

          var search = function(e) {
            var pattern = $('#input-search').val();
            var escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Escape special characters

            var options = {
              ignoreCase: true,     // case insensitive
              exactMatch: false,    // like or equals
              revealResults: true,  // reveal matching nodes
            };

            var results = $searchableTree.treeview('search', [escapedPattern, options]);

            var output = '<p>' + results.length + ' matches found.</p>';
            $.each(results, function (index, result) {
              output += `<p>${index + 1} - ${result.text} </p>`;
            });
            $('#search-output').html(output);
          }

          $('#btn-search').on('click', search);
          $('#input-search').on('keyup', search);

          $('#btn-clear-search').on('click', function (e) {
            $searchableTree.treeview('clearSearch');
            $('#input-search').val('');
            $('#search-output').html('');
          });

          $(".interface").show();
        }
        catch (ex)
        {
          alert("Error in displayTree(): " + ex.toString());
          return false;
        }
      }

      displayTree();
    </script>
  </body>
</html>

 

[asifakhtar]

It works. Txs a lot. Appreciated.