Add search support in Content types and parts definitions

Fixes #1070
OrchardCMS · Oct 7, 2017 · 1d084df · 1d084df
1 parent a9bc573
commit 1d084df
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.ContentTypes/Views/Admin/List.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentTypes/Views/Admin/List.cshtml
@@ -16,8 +16,33 @@
 <ul class="list-group">
     @foreach (var type in Model.Types)
     {
-        <li class="list-group-item">
+        <li class="list-group-item" data-filter-value="@type.DisplayName">
             @Html.DisplayFor(m => type)
         </li>
     }
-</ul>
+</ul>
+<script at="Foot" type="text/javascript">
+    //<![CDATA[
+    $(function() {
+        var searchBox = $('#search-box');
+
+        // On each keypress filter the list of features
+        searchBox.keyup(function(e) {
+            var search = $(this).val().toLowerCase();
+            var elementsToFilter = $("[data-filter-value]");
+
+            // On ESC, clear the search box and display all features
+            if (e.keyCode == 27 || search == '') {
+                searchBox.val('');
+                elementsToFilter.toggle(true);
+            } else {
+                elementsToFilter.each(function() {
+                    var text = $(this).data('filter-value').toLowerCase();
+                    var found = text.indexOf(search) > -1;
+                    $(this).toggle(found);
+                });
+            }
+        });
+    });
+    //]]>
+</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.ContentTypes/Views/Admin/ListParts.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentTypes/Views/Admin/ListParts.cshtml
@@ -17,8 +17,33 @@
 <ul class="list-group">
     @foreach (var type in Model.Parts)
     {
-        <li class="list-group-item">
+        <li class="list-group-item" data-filter-value="@type.DisplayName">
             @Html.DisplayFor(m => type)
         </li>
     }
 </ul>
+<script at="Foot" type="text/javascript">
+    //<![CDATA[
+    $(function() {
+        var searchBox = $('#search-box');
+
+        // On each keypress filter the list of features
+        searchBox.keyup(function(e) {
+            var search = $(this).val().toLowerCase();
+            var elementsToFilter = $("[data-filter-value]");
+
+            // On ESC, clear the search box and display all features
+            if (e.keyCode == 27 || search == '') {
+                searchBox.val('');
+                elementsToFilter.toggle(true);
+            } else {
+                elementsToFilter.each(function() {
+                    var text = $(this).data('filter-value').toLowerCase();
+                    var found = text.indexOf(search) > -1;
+                    $(this).toggle(found);
+                });
+            }
+        });
+    });
+    //]]>
+</script>