Fixed #9531 - highlight search box when filled, add clear button (#9534)

public/mix-manifest.json

@@ -3,21 +3,21 @@
     "/css/build/AdminLTE.css": "/css/build/AdminLTE.css?id=5d8ce6b758f170008cd6",
     "/css/build/app.css": "/css/build/app.css?id=9b6ddbece1a3cfc99036",
     "/css/build/overrides.css": "/css/build/overrides.css?id=0a65220cdae6fbb6d913",
-    "/css/dist/skins/skin-blue.css": "/css/dist/skins/skin-blue.css?id=a5c05d669800b5f5afa1",
-    "/css/dist/skins/skin-red.css": "/css/dist/skins/skin-red.css?id=1d5974e034b61b5795ec",
-    "/css/dist/skins/skin-contrast.css": "/css/dist/skins/skin-contrast.css?id=cf23e72b9c963c5ab23a",
-    "/css/dist/skins/skin-green.css": "/css/dist/skins/skin-green.css?id=76d0cc15e24e6a03fd2f",
-    "/css/dist/skins/skin-green-dark.css": "/css/dist/skins/skin-green-dark.css?id=6843dc80c6b201c4a7db",
-    "/css/dist/skins/skin-black.css": "/css/dist/skins/skin-black.css?id=d3c953fe66305cef3b54",
-    "/css/dist/skins/skin-black-dark.css": "/css/dist/skins/skin-black-dark.css?id=97d81897063e94094a2a",
-    "/css/dist/skins/skin-red-dark.css": "/css/dist/skins/skin-red-dark.css?id=679ab6aeba9c278a9051",
-    "/css/dist/skins/skin-purple.css": "/css/dist/skins/skin-purple.css?id=56d008e86c006d37bc23",
-    "/css/dist/skins/skin-purple-dark.css": "/css/dist/skins/skin-purple-dark.css?id=915206c9df022fc5037a",
-    "/css/dist/skins/skin-yellow.css": "/css/dist/skins/skin-yellow.css?id=2b17e31c820ef66db5a1",
-    "/css/dist/skins/skin-yellow-dark.css": "/css/dist/skins/skin-yellow-dark.css?id=ccdd91178df4c10811e9",
-    "/css/dist/skins/skin-blue-dark.css": "/css/dist/skins/skin-blue-dark.css?id=928bfe8035be1497e83b",
-    "/css/dist/skins/skin-orange-dark.css": "/css/dist/skins/skin-orange-dark.css?id=539f691ddc970f867c49",
-    "/css/dist/skins/skin-orange.css": "/css/dist/skins/skin-orange.css?id=4bf9e22405edb2dc2b76",
+    "/css/dist/skins/skin-blue.css": "/css/dist/skins/skin-blue.css?id=e57a7bb77ae1fb640331",
+    "/css/dist/skins/skin-red.css": "/css/dist/skins/skin-red.css?id=fdb6630b38435c84c7d2",
+    "/css/dist/skins/skin-contrast.css": "/css/dist/skins/skin-contrast.css?id=5d582ce5e98f591b8c65",
+    "/css/dist/skins/skin-green.css": "/css/dist/skins/skin-green.css?id=02e8563844e00840e01c",
+    "/css/dist/skins/skin-green-dark.css": "/css/dist/skins/skin-green-dark.css?id=4daaa0e353849ff8cacf",
+    "/css/dist/skins/skin-black.css": "/css/dist/skins/skin-black.css?id=c89047b28b272bc07e81",
+    "/css/dist/skins/skin-black-dark.css": "/css/dist/skins/skin-black-dark.css?id=9f9013a3ec06e256e1dc",
+    "/css/dist/skins/skin-red-dark.css": "/css/dist/skins/skin-red-dark.css?id=5b4937fd36d26f7a92e3",
+    "/css/dist/skins/skin-purple.css": "/css/dist/skins/skin-purple.css?id=e6239abc2a7a28441911",
+    "/css/dist/skins/skin-purple-dark.css": "/css/dist/skins/skin-purple-dark.css?id=85ef26204fbc8b2dad5b",
+    "/css/dist/skins/skin-yellow.css": "/css/dist/skins/skin-yellow.css?id=84667fc9b0f00d11a9c4",
+    "/css/dist/skins/skin-yellow-dark.css": "/css/dist/skins/skin-yellow-dark.css?id=8e774a0e5435527d63c4",
+    "/css/dist/skins/skin-blue-dark.css": "/css/dist/skins/skin-blue-dark.css?id=5269656828cfba157e92",
+    "/css/dist/skins/skin-orange-dark.css": "/css/dist/skins/skin-orange-dark.css?id=0a4ddc28e3a8228cc11e",
+    "/css/dist/skins/skin-orange.css": "/css/dist/skins/skin-orange.css?id=b22dc3561eda3d2027a9",
     "/css/dist/all.css": "/css/dist/all.css?id=fc64989106daf3be016b",
     "/css/blue.png": "/css/blue.png?id=4c85d6a97173123bd14a",
     "/css/blue@2x.png": "/css/blue@2x.png?id=62c67c6a822439e8a4ac",
@@ -27,19 +27,19 @@
     "/js/build/vendor.js": "/js/build/vendor.js?id=b93877b4a88a76e1b18b",
     "/js/dist/bootstrap-table.js": "/js/dist/bootstrap-table.js?id=fd6e727609678bf04984",
     "/js/dist/all.js": "/js/dist/all.js?id=d0fbb4953b84b70787d4",
-    "/css/dist/skins/skin-green.min.css": "/css/dist/skins/skin-green.min.css?id=76d0cc15e24e6a03fd2f",
-    "/css/dist/skins/skin-green-dark.min.css": "/css/dist/skins/skin-green-dark.min.css?id=6843dc80c6b201c4a7db",
-    "/css/dist/skins/skin-black.min.css": "/css/dist/skins/skin-black.min.css?id=d3c953fe66305cef3b54",
-    "/css/dist/skins/skin-black-dark.min.css": "/css/dist/skins/skin-black-dark.min.css?id=97d81897063e94094a2a",
-    "/css/dist/skins/skin-blue.min.css": "/css/dist/skins/skin-blue.min.css?id=a5c05d669800b5f5afa1",
-    "/css/dist/skins/skin-blue-dark.min.css": "/css/dist/skins/skin-blue-dark.min.css?id=928bfe8035be1497e83b",
-    "/css/dist/skins/skin-yellow.min.css": "/css/dist/skins/skin-yellow.min.css?id=2b17e31c820ef66db5a1",
-    "/css/dist/skins/skin-yellow-dark.min.css": "/css/dist/skins/skin-yellow-dark.min.css?id=ccdd91178df4c10811e9",
-    "/css/dist/skins/skin-red.min.css": "/css/dist/skins/skin-red.min.css?id=1d5974e034b61b5795ec",
-    "/css/dist/skins/skin-red-dark.min.css": "/css/dist/skins/skin-red-dark.min.css?id=679ab6aeba9c278a9051",
-    "/css/dist/skins/skin-purple.min.css": "/css/dist/skins/skin-purple.min.css?id=56d008e86c006d37bc23",
-    "/css/dist/skins/skin-purple-dark.min.css": "/css/dist/skins/skin-purple-dark.min.css?id=915206c9df022fc5037a",
-    "/css/dist/skins/skin-orange.min.css": "/css/dist/skins/skin-orange.min.css?id=4bf9e22405edb2dc2b76",
-    "/css/dist/skins/skin-orange-dark.min.css": "/css/dist/skins/skin-orange-dark.min.css?id=539f691ddc970f867c49",
-    "/css/dist/skins/skin-contrast.min.css": "/css/dist/skins/skin-contrast.min.css?id=cf23e72b9c963c5ab23a"
+    "/css/dist/skins/skin-green.min.css": "/css/dist/skins/skin-green.min.css?id=02e8563844e00840e01c",
+    "/css/dist/skins/skin-green-dark.min.css": "/css/dist/skins/skin-green-dark.min.css?id=4daaa0e353849ff8cacf",
+    "/css/dist/skins/skin-black.min.css": "/css/dist/skins/skin-black.min.css?id=c89047b28b272bc07e81",
+    "/css/dist/skins/skin-black-dark.min.css": "/css/dist/skins/skin-black-dark.min.css?id=9f9013a3ec06e256e1dc",
+    "/css/dist/skins/skin-blue.min.css": "/css/dist/skins/skin-blue.min.css?id=e57a7bb77ae1fb640331",
+    "/css/dist/skins/skin-blue-dark.min.css": "/css/dist/skins/skin-blue-dark.min.css?id=5269656828cfba157e92",
+    "/css/dist/skins/skin-yellow.min.css": "/css/dist/skins/skin-yellow.min.css?id=84667fc9b0f00d11a9c4",
+    "/css/dist/skins/skin-yellow-dark.min.css": "/css/dist/skins/skin-yellow-dark.min.css?id=8e774a0e5435527d63c4",
+    "/css/dist/skins/skin-red.min.css": "/css/dist/skins/skin-red.min.css?id=fdb6630b38435c84c7d2",
+    "/css/dist/skins/skin-red-dark.min.css": "/css/dist/skins/skin-red-dark.min.css?id=5b4937fd36d26f7a92e3",
+    "/css/dist/skins/skin-purple.min.css": "/css/dist/skins/skin-purple.min.css?id=e6239abc2a7a28441911",
+    "/css/dist/skins/skin-purple-dark.min.css": "/css/dist/skins/skin-purple-dark.min.css?id=85ef26204fbc8b2dad5b",
+    "/css/dist/skins/skin-orange.min.css": "/css/dist/skins/skin-orange.min.css?id=b22dc3561eda3d2027a9",
+    "/css/dist/skins/skin-orange-dark.min.css": "/css/dist/skins/skin-orange-dark.min.css?id=0a4ddc28e3a8228cc11e",
+    "/css/dist/skins/skin-contrast.min.css": "/css/dist/skins/skin-contrast.min.css?id=5d582ce5e98f591b8c65"
 }

resources/assets/less/skins/skin-black-dark.less

@@ -403,3 +403,6 @@ a {
   display: table-cell;
 }
 
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-black.less

@@ -109,3 +109,7 @@ a {
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: @black;
 }
+
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-blue-dark.less

@@ -392,3 +392,6 @@ a {
   display: table-cell;
 }
 
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-blue.less

@@ -121,3 +121,7 @@ a {
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: #3c8dbc;
 }
+
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-contrast.less

@@ -169,3 +169,7 @@ input::-ms-input-placeholder { /* IE 10+ */
 .fixed-table-container tbody .selected td {
   background-color: #fff8af;
 }
+
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-green-dark.less

@@ -392,3 +392,7 @@ a {
   display: table-cell;
 }
 
+
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-green.less

@@ -106,3 +106,7 @@ a {
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: @green;
 }
+
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-orange-dark.less

@@ -394,3 +394,6 @@ a {
   display: table-cell;
 }
 
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-orange.less

@@ -106,3 +106,7 @@ a {
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: @orange;
 }
+
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-purple-dark.less

@@ -394,3 +394,6 @@ a {
   display: table-cell;
 }
 
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-purple.less

@@ -108,3 +108,6 @@ a {
   background-color: @purple;
 }
 
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-red-dark.less

@@ -393,3 +393,6 @@ a {
   display: table-cell;
 }
 
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-red.less

@@ -106,3 +106,7 @@ a {
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: @red;
 }
+
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-yellow-dark.less

@@ -391,3 +391,6 @@ a {
   display: table-cell;
 }
 
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/assets/less/skins/skin-yellow.less

@@ -106,3 +106,7 @@ a {
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: @yellow;
 }
+
+.search-highlight, .search-highlight:hover {
+  background-color: #e9d15b;
+}

resources/views/partials/bootstrap-table.blade.php

@@ -1,13 +1,15 @@
 @push('css')
 <link rel="stylesheet" href="{{ url(mix('css/dist/bootstrap-table.css')) }}">
+
 @endpush
 
 @push('js')
-<script src="{{ asset(mix('js/dist/bootstrap-table.js')) }}"></script>
+<script src="{{ url(mix('js/dist/bootstrap-table.js')) }}"></script>
 <script nonce="{{ csrf_token() }}">
 
     $(function () {
 
+
         var stickyHeaderOffsetY = 0;
 
         if ( $('.navbar-fixed-top').css('height') ) {
@@ -21,7 +23,7 @@
 
         var keyBlocked = function(key) {
             for(var j in blockedFields) {
-                if(key === blockedFields[j]) {
+                if (key === blockedFields[j]) {
                     return true;
                 }
             }
@@ -44,6 +46,7 @@
             mobileResponsive: true,
             maintainSelected: true,
             trimOnSearch: false,
+            showSearchClearButton: true,
             paginationFirstText: "{{ trans('general.first') }}",
             paginationLastText: "{{ trans('general.last') }}",
             paginationPreText: "{{ trans('general.previous') }}",
@@ -69,12 +72,14 @@
                 paginationSwitchUp: 'fa-caret-square-o-up',
                 columns: 'fa-columns',
                 refresh: 'fa-refresh',
-                export: 'fa-download'
+                export: 'fa-download',
+                clearSearch: 'fa-times'
             },
             exportTypes: ['csv', 'excel', 'doc', 'txt','json', 'xml', 'pdf'],
             onLoadSuccess: function () {
-                $('[data-toggle="tooltip"]').tooltip(); // Need to attach tooltips after ajax call
+                $('[data-toggle="tooltip"]').tooltip(); // Needed to attach tooltips after ajax call
             }
+
         });
     });
 
@@ -621,13 +626,37 @@
     });
 
 
-    // This is necessary to make the bootstrap tooltips work inside of the
-    // wenzhixin/bootstrap-table formatters
+
     $(function() {
+
+        // This handles the search box highlighting on both ajax and client-side
+        // bootstrap tables
+        var searchboxHighlighter = function (event) {
+
+            $('.search-input').each(function (index, element) {
+
+                if ($(element).val() != '') {
+                    $(element).addClass('search-highlight');
+                    $(element).next().children().addClass('search-highlight');
+                } else {
+                    $(element).removeClass('search-highlight');
+                    $(element).next().children().removeClass('search-highlight');
+                }
+            });
+        };
+
+        $('.search button[name=clearSearch]').click(searchboxHighlighter);
+        searchboxHighlighter({ name:'pageload'});
+        $('.search-input').keyup(searchboxHighlighter);
+
+        //  This is necessary to make the bootstrap tooltips work inside of the
+        // wenzhixin/bootstrap-table formatters
         $('#table').on('post-body.bs.table', function () {
             $('[data-toggle="tooltip"]').tooltip({
                 container: 'body'
             });
+
+
         });
     });