问Javascript树搜索功能

EN

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.css">
      <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <title>sim-tree: Checkable Hierarchical Tree Demo</title>
      <style>
         body { min-height: 100vh; background-color: #fafafa;}
         .container { margin: 150px auto; max-width: 640px; }
      </style>
   </head>
   <body>
      </script>
      <div class="container">
         <input type="text" name="search" class="form-control" value="" id="demo_2" placeholder="" autofocus style="margin-top:10px;"/>
         <br/><br/>
         <div class="panel-group" id="accordion">
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse1">
                     One
                     </a>
                  </h4>
               </div>
               <div id="collapse1" class="panel-collapse collapse">
                  <div class="panel-body">
                     <div class="tree">
                        <div id="tree"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="panel panel-default">
            <div class="panel-heading">
               <h4 class="panel-title">
                  <a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse2">
                  Two
                  </a>
               </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
               <div class="panel-body">
                  <div class="tree">
                     <div id="tree2"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.js"></script>
      <script>
         var list = [{
         "id": '1',
         "pid": '',
         "name": "JavaScript",
         },
         {
         "id": '11',
         "pid": '1', // parent ID
         "name": "Angular"
         },
         {
         "id": '12',
         "pid": '1',
         "name": "React"
         },{
         "id": '13',
         "pid": '1',
         "name": "Vuejs"
         },{
         "id": '14',
         "pid": '1',
         "name": "jQueryScript.Net"
         },
         {
         "id": '2',
         "pid": '',
         "name": "HTML5"
         },
         {
         "id": '21',
         "pid": '2',
         "name": ""
         }
         
         ];
         
         var list2 = [{
         "id": '1',
         "pid": '',
         "name": "X JavaScript",
         },
         {
         "id": '11',
         "pid": '1', // parent ID
         "name": "X Angular"
         },
         {
         "id": '12',
         "pid": '1',
         "name": "X React"
         },{
         "id": '13',
         "pid": '1',
         "name": "X Vuejs"
         },{
         "id": '14',
         "pid": '1',
         "name": "XY jQueryScript.Net"
         },
         {
         "id": '2',
         "pid": '',
         "name": "X HTML5"
         },
         {
         "id": '21',
         "pid": '2',
         "name": ""
         }
         
         ];
         var tree = simTree({
             el: '#tree',
             data: list,
             check: true,
             linkParent: true,
             //check: true,
             onClick: function (item) {
                 console.log(item)
             },
             onChange: function (item) {
                 console.log(item)
             }
         });
         var tree = simTree({
             el: '#tree2',
             data: list2,
             check: true,
             linkParent: true,
             //check: true,
             onClick: function (item) {
                 console.log(item)
             },
             onChange: function (item) {
                 console.log(item)
             }
         });
         
         
         $('.sim-tree li').each(function(){
             $(this).attr('data-search-term', $(this).text().toLowerCase());
         });
         
         $('#demo_2').on('keyup keypress blur change', function() {
         console.log($('.panel-collapse'));
             $('.panel-collapse').collapse('hide');
             var searchVal = $(this).val();
             var searchTerm = $(this).val().toLowerCase();
             if (searchTerm != ''){
                 $('.sim-tree li').each(function(){
                     if ($(this).filter('[data-search-term *= "' + searchTerm + '"]').length > 0 || searchTerm.length < 1) {
                         console.log(this)
                         $(this).closest('.panel-collapse').collapse('show');
                     } else {
                         $(this).closest('.panel-collapse').collapse('hide');
                         $('.panel-collapse').collapse('hide');
                     }
                 });
             }
             if (searchTerm == ''){
                 $('.panel-collapse').collapse('hide');
             }
         });
         
         
      </script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </body>
</html>