View difference between Paste ID: n0jBY3yS and FbwSjjsM

 {%- comment -%}
    Authors: Tony V., Jeff R.
    Last Update: 1-6-22
-    var $panel = $('.search-target .panel-body'),
+   Summary: Similar to the core PageListAsBlocks template but designed to display children and grandchildren pages
-        $noMatches = $('<div class="no-matches alert alert-info">No matches found</div>');
+   Search functionality has also been added
 {%- endcomment -%}
-    $noMatches.hide();
+
-    $panel.prepend($noMatches);
+
 {%- javascript -%}
-    $('#pageSearch')
+
-        // prevent the enter key from submitting the form
+
-        .on('keydown', function(e)
+    // Prevent async page submission triggered by enter key which breaks script, preventing submission after keyup does not work
     $('#pageSearch').on('keydown', function(e)
-            if (e.keyCode == 13)
+    {
         if (e.keyCode == 13)
-                e.preventDefault();
+
-                return false;
+            e.preventDefault();
             return false;
-        })
+        }
     });
-        .on('keyup', function(e)
+
     // Filter page links when Search box is updated, value of text is not updated until after keyup
-            var value = $(this).val().toLowerCase();
+    $('#pageSearch').on('keyup', function()
-                $matched = $('.panel-body > ul > li').filter(function()
+    {
-                {
+        var value = $(this).val().toLowerCase();
-                    var $setting = $(this),
+
-                        isShown = $setting.is(':visible'),
+        $('.panel-body ul li').filter(function()
-                        isMatch = $setting.text().toLowerCase().indexOf(value) > -1;
+
             $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
-                    $setting.toggleClass('match', isMatch);
+
 
-                    if (isMatch && !isShown) $setting.stop(true,false).show(400);
+        // hides/reveals panel based on the presence of search results
-                    else if (!isMatch && isShown) $setting.stop(true,false).hide(400);
+        $('.panel-body ul').each(function(index)
         {
-                    return isMatch;
+            $(this).parent().parent().show(); // reset visibilty of panels
-                }),
+            if ($(this).children(':visible').length == 0)
-                matchCount = $matched.length;
+
                 //if a panel has no visible children then hide it
-            $noMatches.toggle(matchCount == 0);
+                $(this).parent().parent().hide();
             }
         });
     });
 });
 {%- endjavascript -%}
 
-{% endstylesheet %}
+
     h2 { margin-left:10px; }
     #pageSearch { margin-bottom:15px; }
 {%- endstylesheet -%}
 
 <div class="form-inline">
     <div class="form-group">
         <input id="pageSearch" type="text" class="form-control input-sm" placeholder="Search&hellip;">
-<div class="search-target">
+
-{%- include '~~/Assets/Lava/PageListAsBlocks.lava' -%}
+
 
 {%- for childPage in Page.Pages -%}
     {%- if  childPage.Title != 'All Settings' -%}
         <div class="panel panel-default list-as-blocks clearfix">
             <div class="panel-heading">
                 <h2 class="panel-title"><i class="{{ childPage.IconCssClass }}"></i> {{ childPage.Title }}</h2>
             </div>
             <div class="panel-body">
                 <ul>
                     {%- for grandChildPage in childPage.Pages -%}
                         <li>
                             <a href="{{ grandChildPage.Url }}" {%- if grandChildPage.DisplayDescription != 'true' -%} title="{{ grandChildPage.Description }}"{%- endif -%}>
                                 {%- if grandChildPage.IconCssClass != '' -%}
                                     <i class="{{ grandChildPage.IconCssClass }}"></i>
                                 {%- endif -%}
                                 <h3>{{ grandChildPage.Title }}</h3>
                             </a>
                         </li>
                     {%- endfor -%}
                 </ul>
             </div>
         </div>
     {%- endif -%}
 {%- endfor -%}
 
 {%- if IncludePageList != empty -%}
 <div class="panel panel-default list-as-blocks clearfix">
     <div class="panel-heading"><h2 class="panel-title">Additional Pages</h2></div>
     <div class="panel-body">
         <ul>
             {%- for includedPage in IncludePageList -%}
                 {%- assign attributeParts = includedPage | PropertyToKeyValue -%}
                 <li>
                     <a href="{{ attributeParts.Value }}">{{ attributeParts.Key }}</a>
                 </li>
             {%- endfor -%}
         </ul>
     </div>
 </div>
 {%- endif -%}